CODEWITHSUNDEEP
angularjsangularjs-directive
Alan
Alan

Reputation: 1134

Valid ng-src syntax for string concatenation inside directive template string

I have an ng-src attribute within an image tag that is loaded as a string from the template property of a directive, which supposed to load an image selected by the user. However when the page loads, the console outputs a 404 since there is no image selected and ng-src is loading an empty image. What I currently have is this

"<img  ng-src="myserver.com/{{imagesPath+ selectedImage}}"></img>"

but whenever selectedImage is an empty string I get the empty request.

What I tried changing it to was 

"<img class='snapshot' ng-src='{{selectedImage.length? \'myserver.com\' + imagesPath +selectedImage : \'\' }}'></img>"

And this does not work. What is the correct syntax?

Upvotes: 3

Views: 7445

Answers (2)

petter
petter

Reputation: 83

I had the same problem, using the ng-if solved it (Thanks for that!!). Although I had to change the way that the string is concatenated inside the ng-src: 

ng-src="{{'myserver.com/'+ imagesPath}}"

Upvotes: 8

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

You should check selectedImage.length> 0, so that whenever there is selected image found it will create an src path

"<img class='snapshot' ng-src='{{selectedImage.length> 0 ? \'myserver.com\' + imagesPath +selectedImage : \'\' }}'/>"

Better way would be hide that img tag from html when there is no image using ng-if directive.

"<img ng-if="selectedImage.length > 0" ng-src="myserver.com/{{imagesPath+ selectedImage}}"/>"

Upvotes: 0

Related Questions