Angular Image cannot be loaded

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.

compile app with this option `ng build --prod --output-hashing none`, this might help — suresh bambhaniya, Jul 13 '19 at 11:36
In chrome developer tools, when you run the image url in a different window, does the image come up? — Akber Iqbal, Jul 14 '19 at 03:11
This doesn't really have anything to do with angular. Your trying to load an image that doesn't exist. — Liam, Jul 15 '19 at 07:28
Hello Sir @R.Richards, thanks for your reply. On firefox, there isn't any error, but on chrome, I attached the error to my question.Could you please take a look ?. — Rosa, Jul 15 '19 at 07:31
Hello Sir @Liam, Big thanks for your reply. no Sir the two images are exist. I attached the folder **upload** that approves the existence of the both images.I think there's a problem of synchronization, because after made some changes on sublime tool, the console ng server will update and the 2 images are shown. Have you please any idea?. Big thanks. — Rosa, Jul 15 '19 at 07:41
Have a look at [How to load image (and other assets) in Angular an project?](https://stackoverflow.com/questions/42793292/how-to-load-image-and-other-assets-in-angular-2-project) — Liam, Jul 15 '19 at 07:50
Hello Sir @Liam, thanks for your reply. But none of those cases corresponds with mine. My problem is that the uploaded image already exists. but cannot be loaded synchronously. It be loaded after run **ng serve**. Have you please any explication ?. Big thanks. — Rosa, Jul 15 '19 at 08:43
Hello Sir @AkberIqbal, thanks for your reply. I made some changes on my question, could you please take a look?. Big thanks. — Rosa, Jul 15 '19 at 10:03

score 4 · Accepted Answer · answered Jul 17 '19 at 07:06

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

Angular Image cannot be loaded

1 Answers1