Dynamically showing images using AngularJS

Question

I have a database with a list of items. Each item has it's own unique ID. I would like to associate the ID with an image in a folder using AngularJS. I have tried this:

<img ng-src="~/images/assets/mainImg/{{stages.stageID}}.gif" alt="{{imageDescription}}" style="width:100px;height:100px">

But it doesn't work. Any suggestions please?

Is your base href set properly in .NET? This is as much a .Net question as an angular question (probably more). Inspect the image in the browser and see what the path is resolving to. — Amy Blankenship
– Amy Blankenship, Commented Jun 6, 2016 at 15:16
can you check the error ? what is the path it is actually set when rendered? — riteshmeher
– riteshmeher, Commented Jun 6, 2016 at 15:18

Ant Kennedy · Accepted Answer · 2016-06-06 15:10:17Z

3

Do you have a directory called ~ in your public path? You more than likely just want the define the source as below.

<img ng-src="images/assets/mainImg/{{stages.stageID}}.gif" alt="{{imageDescription}}" style="width:100px;height:100px">

If this doesn't work can you show us your directory structure?

answered Jun 6, 2016 at 15:10

Ant Kennedy

1,2407 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

TJS UK Over a year ago

Actually, mine does work. {{stages.stageID}} should've been {{stageID}}. Been coding too long today! Thanks for your correct answer! If it helps the ~/ refers to the root directory of the project, easier than using many ../

Collectives™ on Stack Overflow

Dynamically showing images using AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related