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

我正在尝试在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函数的基础知识之后，我计划使用javascript switch语句测试特定值并分配图像（例如logo1.svg，logo2.svg等）。 ）加载到每个值（例如org1，org2，org2）thing.org都可以加载（这是一组预定义的值，长度不长且不太可能更改）。

关于如何处理此问题的任何建议？

参考方案

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

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

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

如果在浏览器开发人员工具中查看HTML源文件，则会看到以下内容：

var baseURL = "https://mycdn.net/static/img/folder/"  // or whatever your STATIC_URL is

如何在没有for循环的情况下在Javascript中使用Django模板标签 - javascript

我想在JavaScript中使用模板变量：我的问题是在javascript代码中使用for循环，for循环之间的所有事情都会重复..但我不想要....下面粘贴了我的代码..有人可以告诉我更好的方法吗这..因为这看起来很丑..这是我的代码： {% block extra_javascript %} <script src="/static/js…

使用JS和PHP更改弹出窗口背景图像 - javascript

我有一个JS函数：function zoom(now) { document.getElementById("popup").style.display = "block"; document.getElementById("photos").style.backgroundImage = …

打印二维阵列 - javascript

我正在尝试打印子元素。在this example之后。怎么做？。$myarray = array("DO"=>array('IDEAS','BRANDS','CREATIVE','CAMPAIGNS'), "JOCKEY"=>a…

执行onclick时获得意外令牌 - javascript

我正在使用onclick事件从PHP调用JS函数。这是我的代码：我在一个函数中，因此我需要通过PHP来完成它，因为然后我会返回：$html = '<input type="checkbox" checked value="1" id="setGetSku" name="se…

Javascript到PHP的转换 - javascript

我有一个libphonenumber软件包的javascript端口，它具有以下功能：function cleanPhone(a){ a=a.replace(/[^\d\+]/g,""); return a="+"==a.substr(0,1)?"+"+a.replace(/[^\d]/g,…