离子v2显示互联网图像

Question

我正试图以类似的方式显示我的离子型应用程序的图像：-

<ion-header>

  <ion-navbar>
    <ion-title>Blah/ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>   
    <div id="image">
    </div>
</ion-content>

在我的打字记录文件中，我写了以下内容：-

LoadImage(hash, id){
   document.getElementById("image").innerHTML = '<img src="'+ img_URL + '" />';       
}

但是，使用此方法将导致图像链接被破坏，并且在使用js进行调试时，会弹出403个错误。从外部源显示图像的正确方法是什么？

提前谢谢。

Answer 1

让我们尝试一种更有角度的方法来处理这个问题，而不是document.getElementById

<ion-content padding>
  <div [innerHtml]="myImage">
  </div>
</ion-content>

然后

public myImage: string;

// assume the parameters are neccessary in real code but not for MCVE
loadImage() {
   this.myImage = '<img src="'+ img_url + '"/>';
}

插件：http://plnkr.co/edit/WBeRRJyYucLwvckjh5W7?p=preview

所以，可悲的是，在看了你的一张照片后，他们的反应是

“此站点的所有者不允许热链接”

这意味着这个图像不能嵌入。

Answer 2

这是因为自动消毒的URL角。

你可以在这里读到：https://angular.io/api/platform-browser/DomSanitizer

这已经在Angular 2 disable sanitize中得到了回答