无法显示图像

Question

当我尝试执行我的应用程序时，数据库中的所有数据都会显示出来而不是存储图像我将其路径存储在数据库中并显示图像，但是当我用chrome渲染它时，它会显示

  

错误：未找到404

但是当我在物理上检查它时，图像存在于我上传的文件夹中。

截图：

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>

Answer 1

代码似乎是指带有双斜线（//）的图像的路径名（请参阅您自己的Chrome屏幕截图）。看看是否有帮助。

此外，似乎图片的每个路径都以localhost的正确网址开头，但随后会附加一个完整的文件路径，从C:\开始，这表示您需要追加相反的路径。

就像我在您的问题评论中向您描述的那样，您无法从基于Web的项目引用服务器上的绝对路径。您需要从根URL引用相对路径。

Answer 2

您在文件系统上返回了图像的绝对path（C:/...）。

您必须将图像的相对路径返回给服务器。因为您希望路径为/Photos/image.png。

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

代码会改变如下。

[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);

}

Answer 3

您应该存储虚拟路径而不是物理路径，否则如果要存储物理路径，则应将物理路径转换为托管路径。

您可以使用此代码：

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);
    }
}

然后，您可以在发送列表之前调用此扩展方法。

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

会有性能受到打击。但是，此代码将带您进一步