javascript - 从 Django 后端使用 Javascript 加载多个图像

Question

我正在开发一个基于 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 请求的占位符图像。所以试着做以下两件事:

1. 首先，这是我找到的解决方案here . 这工作正常，但我不想也不能将每个可能的图像硬编码到一个 HTML 文件中，只是为了在用户以后想要选择另一个图像时选择正确的变量。所以我需要一个更动态的解决方案。

2. 在此之后，我尝试了 following .但是当我执行 console.log(DJANGO_STATIC_URL) 时，我得到一个空日志。在 settings.py 文件中包含以下静态 url:STATIC_URL = '/static/'。

所以我想要的是一个解决方案，即我应该如何使用 javascript 加载图像，而无需在 HTML 文件中对它们进行硬编码。我怀疑我误解了某些事情或忽略了一些明显的事情。

Answer 1

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