无法加载本地图片？Angular或Chrome问题？

Question

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

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

基本上，你们如何在开发中测试这个功能。我应该让api返回图像流并通过流显示图像吗？这是个好主意吗？

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

Answer 1

尝试将src更改为ng-src，如

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

Answer 2

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

请检查您的文件夹是否位于项目的“assets”文件夹中。

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

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

Answer 3

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

我最终在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");
    }