如何使用 jQuery 创建包含 Django 静态 src 的 <img> 元素答案

【问题标题】：How to create <img> element including a Django static src using jQuery如何使用 jQuery 创建包含 Django 静态 src 的 <img> 元素
【发布时间】：2020-08-15 23:29:47
【问题描述】：

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

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

这是我的代码，位于相关的 .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 文件作为静态文件包含在 foo.html 文件中。

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

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

哪些输出：

有什么解决办法吗？

【问题讨论】：

在调用文件之前是否在文件中加载了静态文件？
是的，我确实有很多其他文件可以正常加载。

标签： javascript html jquery django

【解决方案1】：

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

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

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

您的选择是：

硬编码图像路径。不太灵活，但您可以在 JS 中的某个地方将 Django 的 STATIC_ROOT 复制为 var。
以通过模板系统获取进程的方式提供 JS。这并不难，但意味着对文件路径的每个请求都运行一些 python
考虑一些将图像路径添加到 JS 可以读取的 HTML 的方法。根据您的操作，这可能有助于使用 JS 进行渐进式增强（除非图像仅由 JS 元素需要）

【讨论】：