无法加载角度图像

debugcn 发表于 Dev

罗莎

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

在模板文件上，我有：

    <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将更新并显示两个图像。

你对解决这个问题有什么想法吗？太谢谢了。

莎莉亚·埃西德

试试这个方法：

在模板 .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;
}