ionic v2 显示来自互联网的图像答案

【问题标题】：ionic v2 display images from internetionic v2 显示来自互联网的图像
【发布时间】：2017-01-26 06:01:09
【问题描述】：

我正在尝试以与以下类似的方式显示我的 ionic 应用程序中的图像：-

<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错误。从外部来源显示图像的正确方法是什么？

提前致谢。

【问题讨论】：

标签： ionic2

【解决方案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

所以，很遗憾，在看了你的一张图片后，反应是

“本站站长不允许盗链”

这意味着无法嵌入此图像。

【讨论】：

感谢您的回答，但恐怕这并没有解决我的问题。
好吧，检查一下plunker。使用您提供的代码，此解决方案有效。否则，如果您的图像上仍有403，表示“禁止”，则由于某种原因无法嵌入它。您可以提供您的 imageUrl 还是本地网络上的图像或它们是否侵犯隐私？
好吧，图片链接确实有效。有趣的是，当我从链接本身加载它们时，图像从那时开始加载。是否与访问本机功能有关，因为无论如何我都在尝试设置这种方法，但不幸的是它无法正常工作。
好吧，我不确定，您并没有表明您正在访问本机功能。但是你的意思是，当你启动你的应用程序时，你看不到任何图像，但是当你手动输入一个 URL 时，图像就会开始加载？
嗯，我目前没有使用原生功能，我只使用了直接方法，在这种情况下，它不起作用。编辑：- 是的，这正是发生的事情。

【解决方案2】：

发生这种情况是因为 Angular 对 URL 进行了自动清理。

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

这已经在 Angular 2 disable sanitize

【讨论】：

嗨艾伦，感谢您的回答。但是，由于服务器不允许资源盗链，出现上述问题。考虑到这一点，我编写了一个脚本来从服务器下载图像，然后显示图像。