Angular 2 Image Url from Local Server Not Displaying in Html

Question

I have an Angular 2 Application that retrieves items from a local database. The server stores the image of the item and the database stores the path where it is stored on the server. I can retrieve all the items without the problem but when it comes to displaying the picture it will not render because it says Unsafe Url . ie 192.168.0.24:1025/UploadFile/freshmilk.jpg. So I Created a pipe to bypassSecurityTrustUrl. After that, the error disappears but still does not display the image.

After inspecting the Html the image src says the correct Url for the image but when I hover my mouse it actually appended the localhost:5555 before the image Url . The problem is that the image will not display since localhost:5555 is appended to the image Url. How do I remove this appended localhost:5555 in the image Url?

[Localhost:5555 appended with the image Url][1]

I tried hard coding one of the images from the server without using data binding. Which resulted in the Green Milk image next to the cat while the Cat is an image Url from the Internet.

This is the Html Part of my Code

<img src="http://192.168.0.24:1025/UploadFile/freshmilk.jpg" width="100" height="100">
<img [src]="picturetest | safeHtml" width="100" height="100">

<div class="table">
    <table class="table">
        <thead>
        <th>Picture</th>
    <th>ID</th>
    <th>Name</th>
    <th>Quantity Stored</th>
    <th>Price</th>
    <th>Purchase Count</th>
    <th>Options</th>

    </thead>`enter code here`
    <tbody>
        <tr *ngFor="let item of items.data">
            <td><img [src]="item.picture | safeHtml" width="100" height="100"></td>
            <td>{{item.itemID}}</td>
            <td>{{item.itemName}}</td>
            <td>{{item.itemQuantityStored}}</td>
            <td>{{item.itemPrice}}</td>
            <td>{{item.purchaseCount}}</td>           
        </tr>


    </tbody>
</table>

I also tried removing the Pipe and manually looping the bypass security

   this.Data.getProducts().subscribe(data => {
          this.items.data=data
          console.log(this.items.data);
          for(var i=0;i<this.items.data.length;i++)
           this.items.data[i].picture=this.sanitizer.bypassSecurityTrustUrl(this.items.data[i].picture);
            console.log("latestest");

    });

Answer 1

I think that you do not need the interpolation in your binding. As you can see at this plunker simple assignment, such as

src={{path}}

works well for external file sources.

You can even see that you probably do not have to do something that hardcore as bypassing security ... you could have sanitized the data, but even that is overkill per my opinion in this case.

I think that the problem is in the way you store and retrieve your data. I would recommend you moving to some flexible backend such as Firebase and using full capabilities of those tools, at least until you will not be able to create and maintain your own hosting/api/db properly. I totally do not like resources path in a form 666.66.0.6:4200/my/secret/path/little_pink_kitten.jpg ... Per your localhost appearing in the path, try prefix the src url with https:// or http:// alternatively ... you should be able to store all your data in simple key-value database structure accompanied with some kind of api allowing you use ajax/promises/etc in your queries, not just directly ask the server with some absolute path.