javascript - Angularjs 图像未显示 : unsafe:background-image

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，当您在同一个域上工作时，不需要实际域。

只是没有弄清楚你想做什么..看起来你可能想使用 background-image 在这种情况下 ng-style 会有帮助

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

更新

由于 URL 属于其他域，您希望使用 $sce 服务将该 url 显示为 trustedResourceURL

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

HTML

并获取其他域 URL 以使其正常工作，而无需在 url 之前添加 unsafe: 然后您需要在配置中清理 imgSrc 并将其列入白名单 url regx。

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