没有显示的Angularjs图像:不安全:背景图像

Question

我想在我的Angularjs应用程序中显示一个图像，下面是代码：

<img  src="background-image: url({{image.url}})" />

其中，image.url是一个作用域变量，其值http://localhost/assets/photo/41/photo.jpg驻留在本地主机上的apache服务器上。

GET请求失败，错误如下：

unsafe:background-image: url(http://localhost/assets/photo/41/photo.jpg):1
GET unsafe:background-image: url(http://localhost/assets/photo/41/photo.jpg) 
net::ERR_UNKNOWN_URL_SCHEME

提前谢谢你，

Answer 1

您使用的img标记不正确

<img  ng-src="{{image.url}" />

&来自服务器的映像url将是/assets/photo/41/photo.jpg而不是http://localhost/assets/photo/41/photo.jpg，在处理同一域时不需要实际域。

只是没有澄清您想要do..It的内容，在这种情况下，似乎您可能希望使用background-image，ng-style会有帮助。

<div ng-style="{'background-image': 'url('+ image.url+')' }"></div>

更新

因为URL是其他域的&您希望使用trustedResourceURL服务将url显示为$sce服务。

$scope.getTrustedResourceUrl = function(url){
   return $sce.getTrustedResourceUrl(url)
};

并在URL之前获取其他域名url以获得不预先预置的unsafe:，然后您需要对配置中的imgSrc进行消毒&在其中使用白名单url。

app.config(function($compileProvider) {
    var imgSrcSanitizationWhitelist = /^\s*(https?|ftp|file):|data:image\//;
    $compileProvider.imgSrcSanitizationWhitelist(imgSrcSanitizationWhitelist);
});