HTML中未显示来自本地服务器的Angular 2图像网址

Question

我有一个Angular 2应用程序，可以从本地数据库中检索项目。 服务器存储项目的图像，数据库存储项目在服务器上的存储路径。 我可以检索所有项目而不会出现问题，但是在显示图片时，由于显示Unsafe Url，因此无法渲染 。 即192.168.0.24:1025/UploadFile/freshmilk.jpg。 所以我创建了一个绕过SecurityTrustUrl的管道。 此后，错误消失，但仍不显示图像。

检查Html后，图像src会说出图像的正确网址，但是当我将鼠标悬停时，它实际上在图像网址之前附加了localhost：5555 。 问题在于，由于将localhost：5555附加到了图像URL，所以该图像将不会显示。 如何在图片网址中删除此附加的localhost：5555？

[Localhost：5555附加了图像网址] [1]

我尝试不使用数据绑定对服务器中的图像之一进行硬编码。 这导致猫旁边有绿色牛奶图像，而猫是来自互联网的图像网址。

这是我代码的HTML部分

<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>

我还尝试了删除管道并手动循环绕过安全性

   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

我认为您不需要在绑定中进行插值。 如您所见，这个简单的任务如

src={{path}}

适用于外部文件源。

您甚至可以看到您可能不必绕过安全性而做一些刻板的事情……您可以对数据进行清理，但是根据我的观点，在这种情况下，这还是过头了。

我认为问题出在您存储和检索数据的方式上。 我建议您使用一些灵活的后端，例如Firebase，并充分利用这些工具的全部功能，至少直到无法正确创建和维护自己的托管/ api / db为止。 我完全不喜欢666.66.0.6:4200/my/secret/path/little_pink_kitten.jpg格式的资源路径...对于出现在路径中的本地主机，请尝试在src url前面加上https：//或http：/ /或者...您应该能够将所有数据存储在简单的键值数据库结构中，并附带某种api，允许您在查询中使用ajax / promises / etc，而不仅是直接向服务器询问绝对路径。