Question

<div class="container" ng-repeat="item in itemslist">
     <img ng-src="{% static "img/new/item.imagename" %}" alt="" />
</div>

项目 - ＆gt;是一个对象，下面是对象定义

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 - ＆gt; [firstitem，seconditem]

在运行时， item.imagename 不会被其值（cart.png）取代。从迭代中走出来。请求仍然使用变量名称（item.imagename）查找，而不是值（cart.png）。

找不到页面（404） http://example.localhost.com:8000/static/img/new/item.imagename

我该如何运作？

Answer 1

使用Django呈现页面的顺序是：

从客户端（浏览器）向服务器（最终是Django）发出请求。
Django使用网址匹配视图，并从视图中呈现服务器中的模板。
客户端获取响应并呈现页面。在这个阶段，客户端对Django及其模板系统等一无所知。

Angular是一种运行客户端的JS技术。它绝对无法了解静态文件，Django模板等。

因此，如果您需要在客户端加载图像，则必须在prehands之前正确指定url。由于您知道名称，因此您只需要提供角度的其余部分。

为此，您需要在上下文中包含settings.STATIC_URL，并将其渲染到模板中的js变量中。此变量将传递到客户端，然后以角度使用它来正确构建URL。

尽管如此，请务必注意角度对插值的安全性考虑，但这完全是另一回事。

开始Web开发时，服务器 - 客户端混淆是常见的。

Answer 2

我认为这就是你需要的

<div class="container" ng-repeat="item in items>
     <img ng-src="{{static + '/img/new/' + item.image}}" alt="" />
</div>

根据您的评论我认为是static = base url

Answer 3

对于将来遇到此问题的任何人，

您在django设置中的static_url是什么。例如：

STATIC_URL='/static/'

然后在你的模板中执行以下操作：

<div class="container" ng-repeat="item in items>
     <img ng-src="static/img/new/{{item.image}}" alt="" />
</div>

Answer 4

我遇到了同样的问题，但是在使用Mustache和Django模板的情况下。这是对我有用的。

settings.py：

STATIC_URL = '/static/'

html的胡子模板部分：

<div class="avatar"><img alt="" src="{% verbatim %}{{ userAvatar }}{% endverbatim %}" /></div>

呈现Moustache模板的Javascript以以下格式发送“ userAvatar”：

"userAvatar" : "/static/images/avatars/" + avatarNameFromServer

无法动态地向AngularJS中的{％static'提供图像名称

4 个答案: