Unable to provide image names dynamically to {% static " in AngularJS - angularjs

Question

<div class="container" ng-repeat="item in itemslist">
<img ng-src="{% static "img/new/item.imagename" %}" alt="" />
</div>
item - > is an object, below is the object definition
var firstItem = {};
firstItem.id = 0;
firstItem.name = "testfirstname";
firstItem.imagename = "cart.png";
var secondItem = {};
secondItem.id = 2;
secondItem.name = "testsecondname";
secondItem.imagename = "home.png";
itemslist- > [firstitem, seconditem]
In the runtime, item.imagename is not getting replaced by its value (cart.png). coming out of the iteration. The request still looks with the variable name (item.imagename) and not the value (cart.png).
Page not found (404)
http://example.localhost.com:8000/static/img/new/item.imagename
How do I get this working?

Answer 1

The order in which a page renders with Django is:
A request is made from the client (browser) to the server (ultimately Django).
Django matches a view using the url, and from the view renders the template in server.
The client gets the response and renders the page. At this stage, the client knows nothing about Django, its templating system etc.
Angular is a JS technology that operates client-side. It has absolutely no way to know about static files, Django templates etc.
Therefore, if you require to load an image in client-side, then you have to properly specify the url beforehands. Since you know the name, you need only to provide the rest of the url to angular.
To do that, you need to include settings.STATIC_URL to your context, and render it into a js variable in your template. This variable will travel through to client, and then in angular use it to properly build the url.
Be sure to take care of angular's security considerations about interpolation though, but that's a different matter entirely.
The server-client confusion is a common one when beginning web development.

Answer 2

I think this is what you need
<div class="container" ng-repeat="item in items>
<img ng-src="{{static + '/img/new/' + item.image}}" alt="" />
</div>
I consider static = base url, according to your comment

Answer 3

For anyone who has this issue in the future,
What ever you're static_url is in the django settings. For example:
STATIC_URL='/static/'
then in your template do this:
<div class="container" ng-repeat="item in items>
<img ng-src="static/img/new/{{item.image}}" alt="" />
</div>

Answer 4

I faced same issue, but in the context of using Mustache and Django templates. Here is what worked for me.
settings.py:
STATIC_URL = '/static/'
Mustache template part of html:
<div class="avatar"><img alt="" src="{% verbatim %}{{ userAvatar }}{% endverbatim %}" /></div>
Javascript that renders the Mustache template sends the "userAvatar" in the following format:
"userAvatar" : "/static/images/avatars/" + avatarNameFromServer