CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
Nick
Nick

Reputation: 500

How do I ng-src bind an image?

I am trying to use data-ng-src to display a pictures in my angular application. I get a value from my database field called "pic". For example let say the return value of the field "pic" is 125(this is an integer value). I have a image file on my server called 125.jpg at file location 

\\someserv\zpicturesFiles\zpicturesResources\Database\VFP\PhotoID\itc\portrait\

I need to render this in my html, but I don't know how to attach the file location with the value in the binding {{e.pic}}. I need {{e.pic}} to pickup

\\someserv\zpicturesFiles\zpicturesResources\Database\VFP\PhotoID\itc\portrait\125.jpg

but currently {{e.pic}} has an integer value of 125 (because that what it returned from sql server db). How can I make {{e.pic}} see the value of \someserv\zpicturesFiles\zpicturesResources\Database\VFP\PhotoID\itc\portrait\125.jpg. This is in an ng-repeat. Here is my code so far implementing the suggestion below.

<section class="mainbar" data-ng-controller="employees as vm">
....
    <div class="padd" data-ng-repeat="e in vm.employees">
        <div class="user">
             <img data-ng-src="{{'\\someserv\zpicturesFiles\zpicturesResources\Database\VFP\PhotoID\itc\portrait\' + e.pic + '.jpg' }}">  
                  class="img-polaroid user-pic"/>

I am getting an error as follows:

Error: [$parse:lexerr] Lexer Error: Unterminated quote at columns 97-99 [' ] in expression ['\someserv\zpicturesFiles\zpicturesResources\Database\VFP\PhotoID\itc\portrait\' + e.pic + '.jpg' ]. http://errors.angularjs.org/1.2.12/$parse/lexerr?p0=Unterminated%20quote&p1=s%2097-99%20%5B'%20%5D&p2='%5C%5Csomeserv%5CzpictureFiles%5CzpicturesResources%5CDatabase%5CVFP%5CPhotoID%5Citc%5Cportrait%5C'%20%2B%20e.pic%20%2B%20'.jpg'%20 at http:// localhost:56014/scripts/angular.js:78:12

what is it not liking?

thanks Nick

Upvotes: 1

Views: 1476

Answers (1)

Nix
Nix

Reputation: 58522

Fiddle Example. The reason I added the e.pick && '\...' is because ng-src will hide until the value is valid. In the fiddle you will see broken will flash with a broken image, until pathExt is set.

Use:

<img data-ng-src="{{e.pic && '\fileserver\pictures\' + e.pic + '.jpg' }}"

Alternatively create something on your scope to make it cleaner:

$scope.getImage = function(e){
    return e && e.pic && ('\fileserver\pictures\' + e.pic + '.jpg');
}

HTML:

<img data-ng-src="getImage(e)" >

Upvotes: 1

Related Questions