无法加载角度图像答案

【问题标题】：Angular Image cannot be loaded无法加载角度图像
【发布时间】：2019-11-22 21:45:40
【问题描述】：

在模板用户列表上，我有一列显示每个用户的身份图像（存储在数据库中）。

在模板文件上，我有：

    <td> 
       <img src="{{emptyStr.concat(user.pathImage.substr(user.pathImage.indexOf('/assets')))}}" style="max-width:30px"/>
       <br/>
       {{user.nameImage}}
       <br/>
       {{emptyStr.concat(user.pathImage.substr(user.pathImage.indexOf('/assets')))}}
    </td>

在组件文件上，emptyStr = "..";

如下图：

图片的名称和网址显示正确。但是，无法加载图像。

在 Firefox 上，没有错误。

但是在 chrome 上，我收到了这个错误：

另外，我得到了：

这意味着该图像在文件上传中不存在，但不存在，如此屏幕截图所示。

我觉得是同步的问题，因为在sublime工具上做了一些修改后，控制台ng server会更新，同时显示2张图片。

您对解决该问题有任何想法吗？非常感谢。

【问题讨论】：

使用此选项编译应用程序ng build --prod --output-hashing none，这可能会有所帮助
在chrome开发者工具中，当你在不同的窗口中运行图片url时，图片会出现吗？
这实际上与角度无关。您尝试加载不存在的图像。
您好@R.Richards 先生，感谢您的回复。在 Firefox 上，没有任何错误，但在 chrome 上，我将错误附加到我的问题中。你能看看吗？。
您好@Liam 先生，非常感谢您的回复。不，先生，这两个图像是存在的。我附上了批准两个图像存在的文件夹upload。我认为同步存在问题，因为在sublime工具上进行了一些更改后，控制台ng服务器将更新并显示2个图像.请问您有什么想法吗？非常感谢。

标签： html angular angular6

【解决方案1】：

试试这个方法：

在模板.html上：

< img src="{{showImage(user.id)}}" alt="{{showImage(user.id)}}" style="max-width:30px"/>

在组件.ts上：

strIntoObjExp: String[] = [];
specialUser: User;
user: User;

showImage(id: number) : String
{
    var requesta = new XMLHttpRequest();
    requesta.open('GET', 'http://localhost:6227/api/auth/getallfiles', false);
    requesta.send(null);

    this.strIntoObjExp = JSON.parse(requesta.responseText);

    var requestb = new XMLHttpRequest();
    requestb.open('GET', 'http://localhost:6227/api/auth/users/' + id, false);
    requestb.send(null);

    this.specialUser = JSON.parse(requestb.responseText);

    this.strIntoObjExp.forEach((exp: String) =>
    {
         if(exp.includes(this.specialUser.nameImage.substring(0, this.specialUser.nameImage.lastIndexOf("."))))
         {
              this.imagePath = exp;
         }
    });
    return this.imagePath;
}

HTH

【讨论】：