使用 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 %}

   {% static image_static %}

   {% endwith %}

   {% load static %}" id="orgLogo" alt="Logo" height="100px"

/>

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