Django网站用JavaScript修改图片src遇404错误求助

问题根源 #

1. 模板标签解析时机不匹配：Django的{% static %}是服务器端渲染标签，页面加载时会被替换为真实的静态资源URL。但JavaScript在客户端浏览器运行，无法识别Django模板语法，直接写在JS里的{% static 'images/newSlideImage.png' %}会被当成纯字符串路径发送给服务器，服务器找不到该路径就返回404。而初始图片的src写在HTML中，服务器已提前解析标签，所以能正常加载。
2. setInterval语法错误：你写的setInterval({...}, x)不符合语法要求，setInterval的第一个参数必须是函数，而非对象，这会导致轮播逻辑根本无法执行。

解决方法 #

下面提供两种可行的实现方式：

方法1：提前在HTML中存储所有轮播图的静态URL

把需要轮播的图片URL用{% static %}解析好，存在HTML的data-*属性里，让JS直接读取这些已解析完成的路径：

<!-- 用隐藏元素存储所有轮播图的URL -->
<div class="slide-urls" style="display: none;"
     data-img1="{% static 'images/image.png' %}"
     data-img2="{% static 'images/newSlideImage.png' %}">
</div>

<!-- 初始轮播图 -->
<img class="slide-img" src="{% static 'images/image.png' %}">

<script>
function startSlide() {
    const slideImg = document.querySelector(".slide-img");
    const slideUrlsEl = document.querySelector(".slide-urls");
    // 提取所有轮播图URL到数组
    const slideUrls = [
        slideUrlsEl.dataset.img1,
        slideUrlsEl.dataset.img2
        // 可继续添加更多图片URL
    ];
    let currentIndex = 0;

    // 正确使用setInterval，第一个参数为函数
    setInterval(() => {
        // 循环切换索引
        currentIndex = (currentIndex + 1) % slideUrls.length;
        slideImg.src = slideUrls[currentIndex];
    }, 3000); // 替换为你的间隔时间，比如3000代表3秒
}

// 启动轮播
startSlide();
</script>

方法2：传递静态资源根路径给JS

先让Django渲染出静态资源的根路径，再在JS里拼接图片路径：

<!-- 先渲染静态根路径，需确保模板顶部已加载static标签：{% load static %} -->
<script>
const staticRoot = "{% get_static_prefix %}";
</script>

<!-- 初始轮播图 -->
<img class="slide-img" src="{% static 'images/image.png' %}">

<script>
function startSlide() {
    const slideImg = document.querySelector(".slide-img");
    const slideUrls = [
        `${staticRoot}images/image.png`,
        `${staticRoot}images/newSlideImage.png`
    ];
    let currentIndex = 0;

    setInterval(() => {
        currentIndex = (currentIndex + 1) % slideUrls.length;
        slideImg.src = slideUrls[currentIndex];
    }, 3000);
}

startSlide();
</script>

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