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

Question

我尝试在 django 模板中使用 javascript 加载特定图像，但似乎遇到了基于 django 方式的问题code> 标签已格式化。

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

{% 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>

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

我最初认为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 可以加载(它是一组不长且预定义的值)不太可能改变)。

关于如何解决这个问题有什么建议吗？

Answer 1

您不能将在后端、服务器(模板标记)上评估的内容与在前端、最终用户浏览器 (javascript) 内评估的内容结合起来:您的 { 在将 HTML 文档发送到浏览器之前，需要由 Django 评估 % static %} 模板标记。您尝试将 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