CODEWITHSUNDEEP
asp.netasp.net-mvcangularjs
Frankline
Frankline

Reputation: 41

Unable to display image

When I try to execute my application all the data's in the database are getting displayed and instead of storing image I stored its path in DB and displaying the image but when I render it in chrome it says

Error: 404 not found

But when I check it physically the images are present in folder where I uploaded.

Screenshot:

screenshot of my output

EmpdetController.cs

[HttpPost]
    public ActionResult UploadFile()
    {
        var file = Request.Files[0];
        var path = Path.Combine(Server.MapPath("~/Photos"), file.FileName);
        file.SaveAs(path);

        // prepare a relative path to be stored in the database and used to display later on.
        var filename = path;
        // save to db
        return Json(filename.ToString(), JsonRequestBehavior.AllowGet);

    }

EmpdetList:

<h2>EmpdetList</h2>

<table class="table table-bordered table-hover table-striped" ng- table="tableParams" show-filter="true">
<tr ng-repeat="Empdet in EmpdetList">                       
    <td data-title="'Id'" filter="{ 'Id': 'text' }" sortable="'Id'">{{Empdet.Id}}</td>
    <td data-title="'FirstName'" sortable="'FirstName'" filter="{ 'FirstName': 'text' }">{{Empdet.FirstName}}</td>
    <td data-title="'LastName'" sortable="'LastName'" filter="{ 'LastName': 'text' }" >{{Empdet.LastName}}</td>
    <td data-title="'Email'" sortable="'Email'" filter="{ 'Email': 'text' }">{{Empdet.Email}}</td>
    <td data-title="'PhotoText'" sortable="'PhotoText'" filter="{ 'PhotoText': 'text' }"><img ng-src={{Empdet.PhotoText}} class="img-responsive"/></td>
    <td data-title="'Age'" sortable="'Age'" filter="{ 'Age': 'text' }">{{Empdet.Age}}</td>

    <td data-title="'Action'">
        <div data-toggle="modal" data-id="{{Empdet.Id}}" data-index="{{$index}}" data-name="{{Empdet.Id}}" ng-click="DeleteEmployee(Empdet.Id)"  title='Click to delete the Account' class="open-confirm-delete fa fa-trash-o deleterow" style="height: 24px!important;">
        </div>
    </td>
</tr>
</table>

Upvotes: 0

Views: 158

Answers (3)

adricadar
adricadar

Reputation: 10209

You returned the absolute path (C:/...) of the image on file system.

You have to return the relative path of the image to the server. Because you want the path to be /Photos/image.png.

var filename = Url.Content("~/Photos/" + file.FileName);

The code will change like below.

[HttpPost]
public ActionResult UploadFile()
{
    var file = Request.Files[0];
    var path = Path.Combine(Server.MapPath("~/Photos"), file.FileName);
    file.SaveAs(path);

    // prepare a relative path to be stored in the database and used to display later on.
    var filename = Url.Content("~/Photos/" + file.FileName);
    // save to db
    return Json(filename.ToString(), JsonRequestBehavior.AllowGet);

}

Upvotes: 1

codebased
codebased

Reputation: 7073

Either you should store a virtual path instead of physical or otherwise if you want to store a physical path then you should convert physical path to hosting path.

You can use this code: 

public static class PathExtensions
{


    public static string ToVirtual (this string physicalPath)
    {
        string url=physicalPath.Substring(System.Web.Hosting.HostingEnvironment.MapPath("~/");).Replace('\\', '/').Insert(0, "~/Photos/");
        return (url);
    }
}

Then you can call this extension method before you can send your list back.

yourlist.ForEach( item => item.url = item.url.ToVirtual());

There will be performance hit. However, this code will take you further

Upvotes: -1

Mathias Lykkegaard Lorenzen
Mathias Lykkegaard Lorenzen

Reputation: 15886

The code seems to refer to path names of the images with double slashes (//) in them (see your own Chrome screenshot). See if removing these helps.

Furthermore, it seems that each path of the image starts with a proper URL to localhost but then has a full file path appended to it, starting with C:\, which suggests that you need to append relative paths instead.

Like I described to you in a comment to your question, you can't refer to absolute paths on your server from a web based project. You need to refer to relative paths from the root URL.

Upvotes: 1

Related Questions