Angular JS using Grunt: Display images from local folder using relative path from JSON

1
votes

So I am using a JSON that returns a lot of data about the user including pictures. The problem I am facing is that I believe the relative path to the images folder is correct however for some reason it is saying in ng-source="relativePath" instead of the image. The only conclusion I can come to is either the path is wrong or there is some sort of import I must do for the images to be used in the project.

<div ng-repeat="results in userInfo.images">
  <figure class="img">
    <img data-ng-source="{{results.imageUrl}}" ng-alt="{{results.name}}" ng-title="{{results.name}}" />
  </figure>
</div>

I have tried source, ng-source, and data-ng-source. When I view in console and on the html for image src it shows the relative path /images/profilePicture.png.

My project has the following structure:

Repositry Name
   app
   css
   home
     home.module.js
     home.tpl.html
   images
     profilePicture.png
   js
   resources
   app.js
   index.html

Using best practices the index.htlm is the container for the single page application. We are using the home.tpl.html page that is injected into the index.html container page.

I have tried switching the path to go directly from index.html -> /images/profilePicture.png as well as from home.tpl.html -> ../images/profilePicture.png.

I could not find any posts relevant to my situation but I believe perhaps you need an app.use or some sort of injection method to add the folder of images to be able to be used?

Note: I am not sure if this is helpful however when I run grunt build instead of serve I check the dist folder and the image folder does in fact have all of the images.

1
angularjsjsonangularjs-directivegruntjs

1 Answers

1
votes

Change your <img data-ng-source declaration to just use ng-src:

<img ng-src="{{results.imageUrl}}" ng-alt="{{results.name}}" ng-title="{{results.name}}" />

More details at w3schools: ng-src