Question

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

不允许加载本地资源：文件：/// 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)));

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

2 个答案: