如何返回图像 url 而不是文件路径

Question

在浏览器中显示上传的图片时遇到问题。 我收到错误

不允许加载本地资源： file:///C:/Office%20Data/dummy/AngularJSAuthentication-master/MyCars/MyCar.API/App_Data/Images/p7.jpeg%20alt=

我编写了以下代码行将图像存储在服务器上的 App_data 下。

File.Path = Url.Content(string.Format("{0}/{1}", System.Web.HttpContext.Current.Server.MapPath("~/App_Data/Images"), fileName));

DB中保存的文件路径如下

file:///C:/Sample%20Data/dummy/AngularJSAuthentication-master/MyCars/MyCar.API/App_Data/Images/p7.jpeg

HTML

<img ng-src="{{motor.FileUploads[0].Path}} alt="Description" />

谷歌搜索后，我得到了这个错误的原因。

Basically i need to return back Image URL instead of file path.

问题： 我不确定如何将图像路径返回到角度客户端。

谁能指导我。

Answer 1

从浏览器引用时不需要指定完整的物理路径

File.Path = Url.Content(string.Format("~/App_Data/Images/{0}", fileName));

这应该返回相对 URL

更新：这行不通，因为您可以直接访问 app_data 文件夹的内容。你可以通过这两种方式中的任何一种来解决这个问题

• 将图像移出 app_data 文件夹到喜欢 ~/images 文件夹 它应该可以工作或
• 将文件保存在 app_data 文件夹中，但使用流式传输文件 您的一个控制器上的内容/文件结果操作

第二个选项的最小示例实现看起来像

public class UploadsController : Controller
{
    [HttpGet]
    public ActionResult Image( string fileName )
    {
        //!validate file name!
        return File( Server.MapPath( $"~/App_Data/{fileName}" ), "image/jpeg" );
    }
}

那么在HTML中它可以被引用为<img src="api/uploads/image?filename=temp.jpg" ...

Answer 2

如果您的所有图像都在Images 的根目录中，则只需删除文件名以外的所有内容：

//using System.IO;

File.Path = Url.Content(string.Format("{0}/{1}", System.Web.HttpContext.Current.Server.MapPath("~/App_Data/Images"), Path.GetFileName(fileName)));

更新

应该像 Sam 的回答：

File.Path = Url.Content(string.Format("~/App_Data/Images/{0}",Path.GetFileName(fileName)));