在Django中使用{% static %}无法实现刷新切换背景图功能

问题核心原因 #

1. static标签语法错误：你代码里的{% static %}标签中间存在多余空格（比如{% static "images/arrival1.jpg" %}），会导致Django无法正确解析标签，生成无效的图片URL。
2. JS文件未被模板渲染：如果JavaScript代码放在单独的.js静态文件中，Django的模板标签（{% static %}）不会被解析，会直接以字符串形式输出，导致图片路径错误。

解决方案 #

方案1：修正内联JS的标签语法（JS写在Django模板中）

把JS代码直接写在.html模板文件里，同时清理{% static %}标签中的多余空格：

function changeBackground() {
  var imagess = [
    "{% static 'images/ESOTSM.jpg' %}",
    "{% static 'images/arrival.jpg' %}",
    "{% static 'images/arrival1.jpg' %}",
    "{% static 'images/asclearasday.jpg' %}",
    "{% static 'images/batmanblue.jpg' %}"
  ];
  var randomNumber = Math.floor(Math.random() * imagess.length);
  document.body.style.backgroundImage = `url(${imagess[randomNumber]})`;
}
window.onload = changeBackground;

方案2：单独JS文件的处理方式

如果要保留独立的JS文件，先在模板中渲染出图片的静态URL，再传给JS使用：

1. 在HTML模板中添加全局变量：

<script>
  window.backgroundImages = [
    "{% static 'images/ESOTSM.jpg' %}",
    "{% static 'images/arrival.jpg' %}",
    "{% static 'images/arrival1.jpg' %}",
    "{% static 'images/asclearasday.jpg' %}",
    "{% static 'images/batmanblue.jpg' %}"
  ];
</script>
<script src="{% static 'js/background.js' %}"></script>

2. 在background.js中使用全局变量：

function changeBackground() {
  var imagess = window.backgroundImages;
  var randomNumber = Math.floor(Math.random() * imagess.length);
  document.body.style.backgroundImage = `url(${imagess[randomNumber]})`;
}
window.onload = changeBackground;

额外检查项 #

• 确认Django项目的settings.py中，STATIC_URL配置正确，且STATICFILES_DIRS包含你的图片所在目录。
• 打开浏览器控制台，查看console.log输出的图片URL是否为有效路径，若显示{% static ... %}原文，说明模板未正确渲染该部分代码。

内容的提问来源于stack exchange，提问作者Tharun nivek