5

I have an AngularJS project and I am trying to show an image from local folder. My folder hierarchy is like this:

--app(folder)
-----controllers(folder)
-----services(folder)
-----views(folder)
--------images(folder)
-----------image1.jpg
-----------image2.jpg
-----------image3.jpg
--------persons.html
--------departments.html
--index.html

I have in image address in personsController.js:

$scope.fooImageAddress='images/image1.jpg';

and in person.html:

<img ng-src="{{ fooImageAddress}}" alt="here should be an image"/>

And nothing shows, just alt message if img. What can I do?

I've read this question, this and this, and tried suggestions, nevertheless there is no result.

Community
  • 1
  • 1
StepUp
  • 36,391
  • 15
  • 88
  • 148

3 Answers3

5

You must change your address, relative to your index.html file

So I suppose app/views/images/image1.jpg

Livio Brunner
  • 193
  • 7
0

it is look like wrong path from a controller the path is different:

$scope.fooImageAddress='../views/images/image1.jpg';

if is was from person page , you was right.

why are you using "ng-src" and not src if is only one image but use like that

<img ng-src="{{'images/'+imageName+'.jpg'}}" alt="here should be an image"/>

$scope.imageName = image1;
omer cohen
  • 272
  • 1
  • 4
  • 19
0

Please try this one, "fooImageAddress" is a parameters.

 <img src= "assets/images/{{fooImageAddress}}" />
Stephen
  • 115
  • 10