静态图像未通过 javascript 加载答案

【问题标题】：Static image not loading through javascript静态图像未通过 javascript 加载
【发布时间】：2023-04-03 09:05:01
【问题描述】：

我正在尝试在鼠标悬停事件发生后在 div (section1) 中加载图片，但无法加载它。

我尝试了许多不同的方法，最近一次是在阅读 Alacy 在 Django {% static 'path' %} in javascript file 中的回答后，我在 HTML 的标签中将我的图片称为变量，其余的 javascript 在外部文件中。

这是我认为的所有相关 HTML：

...
<div id="section1"></div>
<img src="{% static 'images/image.jpg' %}"> //loads
...
<script>
  const pic="{% static 'images/image.jpg' %}"
  const hello="hello world" //test, uploads to section1 without problem
</script>
<script type="text/javascript" src="{% static 'javascript/file.js' %}"></script>

这是我的外部js：

function populate_section1() {
  let output = "<img src=" + pic + ">";
  output += "<p>" + hello + "</p>";
  document.getElementById("section1").innerHTML = output;
};
document.getElementById("section1").addEventListener(
  "mouseover",
  populate_section1
);

正如我所指出的，html 中的 img 加载正常，这意味着静态文件被正常引用，并且 'hello' 正确加载到 'section1' 中，这意味着 .js 外部文件正在与 .html 文件通信美好的。唯一没有进入“section1”的是“pic”。

有人知道怎么回事吗？

【问题讨论】：

标签： javascript django-templates

【解决方案1】：

我通过使用老式文件调用而不是 django 模板来显示我的图像。

const pic = "static/images/image.jpg"

【讨论】：