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

Question

我试图加载使用特定图像javascript的django模板，但似乎根据的方式来运行到一个问题django代码的格式。

我django在如下img标签中有一个标准的静态资产源：

{% load static %}

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

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

<a id="orgName" class="side_nav_item">{{ thing.org_name }}</a>

我想做的是img src根据标签thing.org内部的值进行更改django。

我最初认为jquery这是最好的选择，但它似乎不适合django标签：

$(document).on('load', '#orgName', function(){

    $('img').attr('src','{% static 'img/folder/''+$('#orgLogo').val()+' %}');

});

由于django语法中需要单引号，因此出现错误。

在我掌握了这个javascript函数的基础知识后，我计划使用javascriptswitch 语句来测试特定的值，并为每个值分配一个图像（例如 logo1.svg、logo2.svg 等）（例如org1, org2, org2)thing.org可以加载（这是一组不长且不太可能更改的预定义值）。

关于如何解决这个问题的任何建议？

Answer 1

我能够在不使用javascript.这是工作代码：{% load staticfiles %}<img src="{% with 'img/folder'|add:thing.orgName|add:'.svg' as image_static %}&nbsp; &nbsp;{% static image_static %}&nbsp; &nbsp;{% endwith %}&nbsp; &nbsp;{% load static %}" id="orgLogo" alt="Logo" height="100px"/>图像文件必须与 的值同名thing.orgName，但对于我的用例，这不是问题，因为这些名称可能永远不会更改或更改非常非常少。