Angular Image cannot be loaded - html

Question

On the template list of users, I have a column to show the identity image (stored on database) of each user.
On the template file, I have:
<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>
On the component file, emptyStr = "..";
As displayed bellow:
The name and the url of the image are displayed correctly.
However, the image cannot be loaded.
On firefox, there's no error.
However on chrome, I got this error:
Also, I got:
That means that this image doesn't exists on file upload, but no, that exists as displayed by this screenshot.
I think there's a problem of synchronization, because after made some changes on sublime tool, the console ng server will update and both 2 images are shown.
Have you please any idea about solving that issue ?.
Big thanks.

Answer 1

Try this way:
On the template .html:
< img src="{{showImage(user.id)}}" alt="{{showImage(user.id)}}" style="max-width:30px"/>
On the component .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