使用Javascript和Django模板动态加载HTML图像

Question

我试图在一个django模板中使用javascript加载一个特定的图像，但似乎遇到了一个基于django标记格式的问题。在

我在img标记中有一个标准的django静态资产源，如下所示：

{% load static %}
<img src="{% static 'img/folder/logo1.svg' %}" id="orgLogo" alt="Logo" height="100px"/>

我在页面下方显示django的数据，如下所示：

^{pr2}$

我想做的是让imgsrc根据django标记内的thing.org的值进行更改。在

我原本以为jquery是最好的选择，但它似乎不能很好地处理django标记：

$(document).on('load', '#orgName', function(){
    $('img').attr('src','{% static 'img/folder/''+$('#orgLogo').val()+' %}');
});​​​​​​

我得到错误是因为django语法中需要单引号。在

在我能够让这个javascript函数的基础工作之后，我计划使用javascriptswitch语句来测试特定值，并为javascript可以加载的每个值（e.x.org1，org2，org2）分配一个图像（e.x.logo1.svg，logo2.svg等）thing.org可以加载的每个值（它是一个不长且不可能更改的预定义值集）。在

关于如何处理这个问题有什么建议吗？在

Answer 1

我可以不用javascript来解决这个问题。在

工作代码如下：

{% load staticfiles %}
<img src="{% with 'img/folder'|add:thing.orgName|add:'.svg' as image_static %}
   {% static image_static %}
   {% endwith %}
   {% load static %}" id="orgLogo" alt="Logo" height="100px"
/>

图像文件的名称必须与thing.orgName的值相同，但对于我的用例来说，这不是问题，因为这些名称可能永远不会更改或很少更改。在

Answer 2

您不能将在后端、服务器上评估的内容（模板标记）和在前端评估的内容（在最终用户的浏览器（javascript）中）：您的{% static %}模板标记需要在将HTML文档发送到浏览器之前由Django评估。您试图将javascript计算的变量混合到{% static %}标记中，但这没有意义，因为它们在完全不同的时间点（在不同的计算机上）进行计算。在

当然，您可以使用模板标记来创建字符串，然后在javascript中使用：

var baseURL = "{% static 'img/folder/' %}"
$(document).on('load', '#orgName', function(){
    $('img').attr('src', baseURL + $('#orgLogo').val());
});​​​​​​

如果您在浏览器开发工具中查看HTML源文件，您会看到：

^{pr2}$