如何在Django模板中用JavaScript变量拼接static资源路径？

你可以先通过Django模板标签渲染出静态资源的基础路径，再在JavaScript中拼接你的piece变量，这样不需要额外请求后端，避免触发请求过多的错误：

// 用Django静态标签渲染出基础路径（服务器端完成）
const baseChessImgPath = "{% static 'img/chesspieces/wikipedia/' %}";
// 你的JavaScript变量
const piece = "white_queen.png"; // 替换成你的实际变量值
// 拼接生成完整的img标签
const html = `<img src="${baseChessImgPath}${piece}" />`;

原理说明 #

• Django的{% static %}标签在页面渲染时会被替换成对应静态资源的完整URL（比如/static/img/chesspieces/wikipedia/），这一步在服务器端完成，不需要客户端额外请求。
• 之后在客户端JavaScript中，直接将预渲染好的基础路径和你的piece变量拼接，就能得到正确的图片地址，全程无额外后端请求。

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