从 Django 后端使用 Javascript 加载多个图像答案

【问题标题】：Load multiple images with Javascript from Django backend从 Django 后端使用 Javascript 加载多个图像
【发布时间】：2019-10-07 13:15:08
【问题描述】：

我正在开发一个基于 d3 的可视化工具，该工具允许用户单击图像上的路径。在我尝试让用户通过简单的下拉菜单更改背景图像之前，一切正常。

问题是由于跨域权限，javascript 无法从磁盘加载文件。所以我选择的解决方案是设置一个后端。我选择 Django。

这是处理图像的 javascript 代码：

window.LOADED_FILE = "PUT PATH HERE";

我有一个可用的下拉菜单，用户可以在其中选择图像，然后我会得到文件的路径。在此之后，我尝试如下加载图像。

window.SVG.append("image")
        .attr("width", window.WIDTH + "px")
        .attr("height", window.HEIGHT + "px")
        .attr("xlink:href", window.LOADED_FILE);

这根本不起作用，我只得到 404 请求的占位符图像。所以尝试了以下两件事：

首先，这是我找到here的解决方案。这工作正常，但我不想要，我不能将每个可能的图像硬编码到 HTML 文件中，只是为了在用户想要稍后在用户想要的时候选择另一个图像时选择正确的变量。所以我需要一个更动态的解决方案。
在此之后，我尝试了following。但是当我做console.log(DJANGO_STATIC_URL) 时，我得到一个空日志。在 settings.py 文件中包含以下静态 url：STATIC_URL = '/static/'。

所以我想要的是一个解决方案，说明我应该如何使用 javascript 加载图像，而不是将它们硬编码到 HTML 文件中。我怀疑我误解了某些东西或忽略了一些明显的东西。

【问题讨论】：

让我直截了当，所以您希望能够使用 JavaScript 从页面的“静态”文件夹中加载所有图像？
{{ STATIC_URL }} 仅在您的 django.template.context_processors.static 在您的 TEMPLATES context_processors 选项中出现在上下文中。
@CatalinHoha 是的，但我不想在我的 HTML 文件中将所有图像都作为变量。工作流的其他部分会生成图像并将它们放在静态文件夹中。
@dirkgroten 我会看看这是否对我有帮助，谢谢。
@dirkgroten 它有效，使用标志我可以访问我的静态文件夹并构建完整路径。非常感谢。

标签： javascript python django

【解决方案1】：

{{ STATIC_URL }} 仅在 settings.py 中的 TEMPLATES context_processors 选项中有 "django.template.context_processors.static" 时才会出现在上下文中。

【讨论】：