无法加载角度图像

Question

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

在模板文件上，我有：

    <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张图片。

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

Answer 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