I want to show an image in my Angularjs application here is the code :

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

Where image.url is a scope variable with the value http://localhost/assets/photo/41/photo.jpg hosted on an apache server on localhost.

The GET request fail with the error :

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

Thanks in advance,

I want to show an image in my Angularjs application here is the code :

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

Where image.url is a scope variable with the value http://localhost/assets/photo/41/photo.jpg hosted on an apache server on localhost.

The GET request fail with the error :

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

Thanks in advance,

• javascript
• html
• css
• angularjs

• Try this: <img ng-src="image.url" /> – nikola-miljkovic Commented May 4, 2015 at 16:20
• @nikolaMM94 not only ng-src="image.url" it would be in {{}} interpolation – Pankaj Parkar Commented May 4, 2015 at 16:28
• 1 Oh sorry i didn't really pay attention, yeah you are right. – nikola-miljkovic Commented May 4, 2015 at 16:30

1 Answer 1

You are using img tag incorrectly

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

& your image url ing from server would be /assets/photo/41/photo.jpg instead of http://localhost/assets/photo/41/photo.jpg, Actual domain is not required when you are working on same domain.

Just not clarified what you want to do..It also seems like you may want to use background-image in that case ng-style would be helpful

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

Update

As URL is of other domain & you wanted to show it in do that url as trustedResourceURL using $sce service

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

HTML

And get other domain URL to get working it without prepending unsafe: before url then you need to sanitize imgSrc in config & whitelist url regx in it.

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