Angular 无法加载本地图像？角度或镀铬问题？

我正在处理一个显示图像列表的页面。 Api返回一个具有imgUri属性的对象列表，该属性将图像绝对路径保存在共享文件夹中

但是当我使用angular/cli运行应用程序时，代码还可以，但在chrome控制台中，我看到很多图像被chrome或angular阻止，我不太确定。我知道也许在服务器上运行它可以避免这个问题

    [HttpGet("{imgId}")]
    public IActionResult Get(string imgId)
    {
        var imageFilePath = $"{ImageFolder}{imgId}.jpg";
        var imageFileStream = System.IO.File.OpenRead(imageFilePath);
        return File(imageFileStream, "image/jpeg");
    }

所以，基本上，你们是如何在开发中测试这个特性的。我应该让api返回图像流并按流显示图像吗？这是个好主意吗？

 <img width="118px" height="180px" src='{{book.imageUri}}' />

---

尝试将src更改为ng src like

<img width="118px" height="180px" ng-src='{{book.imageUri}}' />

---

尝试将src更改为ng src-like

<img width="118px" height="180px" ng-src='{{book.imageUri}}' />

---

如果我正确理解您的问题，您使用的是angular cli，您使用的API是获取图像，然后在本地将其保存到共享文件夹中，但它们不会显示，对吗

请检查文件夹是否位于项目的“资产”文件夹中

如果不是这样，您可以在asset文件夹中移动文件，或者必须在angular-cli.json文件中添加文件夹路径：

"apps": [
    {
     ...,
     "assets": [
         "assets",
         "your-folder", /* if it's on the same level as the assets folder */
         "favicon.ico"
     ],
     ...
    }
],

---

如果我正确理解您的问题，您使用的是angular cli，您使用的API是获取图像，然后在本地将它们保存到共享文件夹中，但它们不会显示，对吗

请检查文件夹是否位于项目的“资产”文件夹中

如果不是这样，您可以在asset文件夹中移动文件，或者必须在angular-cli.json文件中添加文件夹路径：

"apps": [
    {
     ...,
     "assets": [
         "assets",
         "your-folder", /* if it's on the same level as the assets folder */
         "favicon.ico"
     ],
     ...
    }
],

---

谢谢大家！在浪费了很多时间之后，我厌倦了寻找原因

最后，我在WebApi上添加了一个新的HttpGet方法来解决这个问题

    [HttpGet("{imgId}")]
    public IActionResult Get(string imgId)
    {
        var imageFilePath = $"{ImageFolder}{imgId}.jpg";
        var imageFileStream = System.IO.File.OpenRead(imageFilePath);
        return File(imageFileStream, "image/jpeg");
    }

---

谢谢大家！在浪费了很多时间之后，我厌倦了寻找原因

最后，我在WebApi上添加了一个新的HttpGet方法来解决这个问题

    [HttpGet("{imgId}")]
    public IActionResult Get(string imgId)
    {
        var imageFilePath = $"{ImageFolder}{imgId}.jpg";
        var imageFileStream = System.IO.File.OpenRead(imageFilePath);
        return File(imageFileStream, "image/jpeg");
    }

---

---

Chrome不会阻止图像，错误似乎是由api中的链接引发的。你能分享api返回的真实json吗？@ThienHoang添加了json，谢谢。现在我想你的图像url让浏览器明白图像是本地文件（ref）。您应该使用“sydymgp1/images/image.png”语法更改图像。no@ThienHoang我尝试了不同的斜杠，但没有人成功。我猜是因为Angular/cli用户权限？因此，我可以访问这些图像/此共享文件夹，因为我是被授予访问权限的域用户。但当angular/cli运行时，它是什么用户？这里显示的图像可以是两种类型：一种来自服务器，另一种是内部项目（由angular cli托管）。您的共享文件夹也是本地文件，当浏览器显示图像时，它超出范围，因为您可以阅读我的上述链接。或者我误解了你们的意思是它在项目内部吗？Chrome不会阻止图像，错误似乎是由你们的api链接抛出的。你能分享api返回的真实json吗？@ThienHoang添加了json，谢谢。现在我想你的图像url让浏览器明白图像是本地文件（ref）。您应该使用“sydymgp1/images/image.png”语法更改图像。no@ThienHoang我尝试了不同的斜杠，但没有人成功。我猜是因为Angular/cli用户权限？因此，我可以访问这些图像/此共享文件夹，因为我是被授予访问权限的域用户。但当angular/cli运行时，它是什么用户？这里显示的图像可以是两种类型：一种来自服务器，另一种是内部项目（由angular cli托管）。您的共享文件夹也是本地文件，当浏览器显示图像时，它超出范围，因为您可以阅读我的上述链接。或者我误解了你的意思是它在project内部吗？compiler.es5.js:1689未捕获错误：模板解析错误：无法绑定到“ng src”，因为它不是“img”的已知属性。（“ol-md-12”>@Rahi.Shah问题是针对angular2+的，即使在angularJS中，问题也只是ng src=“book.imageUri”。不需要花括号。我想你是说，是的，我是说，伙计们，不管它是以何种方式生成html代码的。现在这没关系。问题不在于html，而在于阻止html页面显示图像的东西。compiler.es5.js:1689未捕获错误：模板解析错误：无法绑定到“ng src”，因为它不是一个已知的正确代码“img”的类型（“ol-md-12”>@Rahi.Shah这个问题是针对angular2+的，即使在angularJS中，它也只是ng src=“book.imageUri”.不需要花括号。我想你是说，是的，我是说，伙计们，不管它是以何种方式生成html代码的。现在这没关系。问题不在于html，而在于阻止html页面显示图像的东西。