Having problem with image loading from server

I am getting a strange error while images are loading from the server ,
here is the code I am using , (image tag)
“img ng-show=”{{msg.unique_filename}}" style=“background-image:url({{encode(msg.unique_filename)}})” class=“attachment” >"

while images are loading I’m getting an error “Error: [$parse:syntax] Syntax Error: Token ‘_image’ is an unexpected token at column 14 of the expression [1426849012963_image.jpg] starting at [_image.jpg].”

FYI images are being loaded perfectly , the problem is its throwing an error in the console for every image

I don’t think you need curly braces in ng-show

yeah you don’t need curly braces, but thats not the problem here . Its showing error in image url

what does encode do? And why do you need img tag here at all? I think your best bet is to write a small directive that will do whatever you do on encode and then apply background-image to element.

encode is just a method which returns the url after encoding (javascript encodeUri() method). I tried replacing the encode() with url directly like “img ng-show=”{{msg.unique_filename}}" style=“background-image:url(“http://domainname/uploadedfiles/{{msg.unique_filename}})” class=“attachment” >” still its showing the same error
my encode method is $scope.encode = function(filename) {
return encodeURI('http://domainname/uploadedfiles/’+filename);

wrap curly braces inside of background-image in another set of quotes like so:


I need to concatenate it with server domain , so I tried like this
style=“background-image:url(‘http://domainname.com/{{msg.unique_filename}}’)” but still its throwing the same error

Well yes because you need to wrap curly brackets in another set of quotes, but since you have 2 sets of quotes already, it’s a bit tricky, you need to either escape quotes or do it in controller/directive

Are you saying to envelope the angular expression with escape quotes like this
style=“background-image:url('http://domainname.com/ '{{msg.unique_filename}} ‘’)”

one more thing I noticed is its throwing this error where ever it finds ‘_’ in the image url. Is underscore not allowed in image src?

yes, but since it’s already within a quotes I don’t think it will work. So your best bet would probably is to do it within a controller or directive

underscore are allowed, it’s just angular is having troubles evaluating your string like that i think

@rupesh_b Try this:

<img ng-style="{ backgroundImage: 'http://domainname.com/' + msg.unique_filename }">

if I do it from controller there will some performance lagging , since I need to add additional key to the object array I’m getting from the http request.

there is some problem with the syntax , ng-style is working if it is like this

img ng-style="{ ‘background-image’ : ‘url( http://www.domainname.com/{{msg.unique_filename}})’ }" >

but still no luck , its throwing same error.

Can you put your breaking example in here: http://plnkr.co/edit/iyilDrh4pIezLO4hHxsz?p=preview

I don’t have any problem with displaying images , all the images from server are loading perfectly . My problem is its throwing some error in browser console. My json from service looks like this
messages: [{filename:“image.jpg”,message_id: “104”,unique_filename: “1426849012963_image.jpg”},{ …}, {… }, … ]
After displaying images my console having the following error ,

Error: [$parse:syntax] Syntax Error: Token ‘_image’ is an unexpected token at column 14 of the expression [1426849012963_image.jpg] starting at [_image.jpg].

at REGEX_STRING_REGEXP (file:///C:/Users/rupesh.b/Desktop/Workingopy/ionic/Working/www/lib/ionic/js/ionic.bundle.js:7888:12)
at Parser.throwError (file:///C:/Users/rupesh.b/Desktop/Working%copy/ionic/Working/www/lib/ionic/js/ionic.bundle.js:19789:11)
at Parser.parse (file:///C:/Users/rupesh.b/Desktop/Working%copy/ionic/Working/www/lib/ionic/js/ionic.bundle.js:19744:12)
at $parse (file:///C:/Users/rupesh.b/Desktop/Working%copy/ionic/Working/www/lib/ionic/js/ionic.bundle.js:20451:39)
at Scope.$get.Scope.$watch (file:///C:/Users/rupesh.b/Desktop/Working%copy/ionic/Working/www/lib/ionic/js/ionic.bundle.js:21609:19)
at ngShowDirective.link (file:///C:/Users/rupesh.b/Desktop/Working%copy/ionic/Working/www/lib/ionic/js/ionic.bundle.js:32499:13)
at invokeLinkFn (file:///C:/Users/rupesh.b/Desktop/Working%copy/ionic/Working/www/lib/ionic/js/ionic.bundle.js:16019:9)
at nodeLinkFn (file:///C:/Users/rupesh.b/Desktop/Working%copy/ionic/Working/www/lib/ionic/js/ionic.bundle.js:15531:11)
at compositeLinkFn (file:///C:/Users/rupesh.b/Desktop/Working%copy/ionic/Working/www/lib/ionic/js/ionic.bundle.js:14887:13)
at compositeLinkFn (file:///C:/Users/rupesh.b/Desktop/Working%copy/ionic/Working/www/lib/ionic/js/ionic.bundle.js:14890:13)

I don’t understand why this error is being shown in console for every image loading.

Well my image does have underscores and it is working fine; Try to do what I do here: http://plnkr.co/edit/iyilDrh4pIezLO4hHxsz?p=preview

Thank you very much yurinondual, its working fine now. I am using
img ng-style="{ ‘background-image’ : ‘url( http://www.domainname.com/{{msg.unique_filename}})’ }" >

The problem is I’m having a lot of ng-show in html template and one of it has an expression(curly braces) inside it that’s where it’s throwing error. I apologize for wasting your time it was a mistake on my part and thank you for sticking with me till the end.

Ha no worries. I know it’s always those small things that is difficult to spot immediately. Glad it is working now