如何在Django模板中将jQuery变量传入img的static src属性

核心原因是：{% static %}是Django服务器端模板渲染时解析的，而Ajax返回数据后是在客户端JS里动态生成元素，这时候模板标签已经完成解析，没法再识别JS变量。给你两个直接可行的方案：

方案1：在页面预存静态文件根路径，JS里拼接 #

先在你的HTML模板里，提前把Django的静态文件根路径存在全局JS变量中：

<!-- 在模板的<script>标签里定义 -->
<script>
// 注意STATIC_URL需要在模板渲染时解析
const staticBaseUrl = "{{ STATIC_URL }}";
</script>

然后在处理Ajax返回的JS代码里，直接拼接完整图片路径：

// 假设Ajax返回的文件名列表是imageNames
imageNames.forEach(fname => {
    // 假设你的图片存在static/images目录下，根据实际路径调整
    const imgSrc = `${staticBaseUrl}images/${fname}`;
    const imgElement = document.createElement('img');
    imgElement.src = imgSrc;
    // 追加到id为grid的div中
    document.getElementById('grid').appendChild(imgElement);
});

方案2：视图直接返回完整图片URL #

修改Django视图，在返回文件名列表时，直接用Django的static()函数生成完整的静态文件URL，再返回给前端：

from django.templatetags.static import static
from django.http import JsonResponse

def your_view(request):
    # 假设你从某处获取到文件名列表
    image_filenames = ['img1.jpg', 'img2.jpg']
    # 生成完整URL列表
    image_urls = [static(f'images/{fname}') for fname in image_filenames]
    return JsonResponse({'image_urls': image_urls})

然后前端JS直接使用返回的URL：

// 假设Ajax请求成功后拿到response.data.image_urls
response.data.image_urls.forEach(url => {
    const imgElement = document.createElement('img');
    imgElement.src = url;
    document.getElementById('grid').appendChild(imgElement);
});

这两种方案都能避开客户端无法解析{% static %}模板标签的问题，按需选择即可。

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