L1ghtk3ira L1ghtk3ira - 3 months ago 28
JSON Question

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

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.

Any help on why this is not working is greatly appreciated as I have been racking my brain trying to figure out why this is not working.

Thank you in advance, if you require more information comment below and I'd be happy to add it to the question.

Answer

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