如何创建<img>元素包括使用 jQuery 的 Django static src

Question

我想使用 jQuery 创建一个 img 元素。 由于我使用 Django 我将不得不通过 static 变量引用图像文件。 我尝试了不同的解决方案来解决这个问题，但服务器无法加载图像，因为浏览器得到了错误的 url。

我最初加载了 static，所有其他 static 文件都加载得很好。

这是我的代码，位于related.js 文件中：

// foo.js included in foo.html which extends base.html

// Create Image element
 var arrowImage = $('<img />', {
   id: 'arrowImage',
   src: '{% static \"images/arrow.svg\" %}',
 });

// 
src: '{% static "images/arrow.svg" %}',

//
src: "{% static 'images/arrow.svg' %}",

//
src: "{% static \"'images/arrow.svg'\" %}",

错误：

GET http://127.0.0.1:8000/%7B%%20static%20%22images/arrow.svg%22%20%%7D 404 (Not Found)

我有一个 base.html 由 foo.html 扩展，该元素应在其中创建。 包含上述代码的 .js 文件作为 static 包含在 foo.html 文件中。

使用这个解决方案，我得到了实际创建的正确 DOM：

            // Create Image element
            var arrowImage = $('<img />', {
              id: 'arrowImage',
              src: "{% static \'images/arrow.svg\' %}",
            });

哪个输出：

有什么解决办法吗？

Answer 1

您能否提供有关上述代码在何处运行的更多信息？

可能是您在js文件中运行它，它本身被用作 static 文件。 如果是这种情况，那么 Django 没有通过模板系统运行文件的内容，因此模板标签没有被解析。

请告诉我们更多有关您如何向浏览器提供内容的信息，这样会更容易提供帮助。

您的选择是：

1. 硬编码图像路径。 不太灵活，但您可以在 JS 的某个地方将 Django 的STATIC_ROOT为 var。

2. 以通过模板系统获取进程的方式为 JS 提供服务。 这并不难，但意味着对文件路径的每个请求都运行一些 python

3. 考虑一些将图像路径添加到 JS 可以读取的 HTML 的方法。 根据您在做什么，这可能有助于使用 JS 进行渐进增强（除非图像仅由 JS 元素需要）