Flask中通过JavaScript加载静态图片失败问题求助

核心问题在于Jinja2模板渲染时机和JS字符串解析的冲突：

• 直接写在HTML里的<img>标签，服务器端的Jinja2会先把{{url_for()}}渲染成正确的静态资源路径，浏览器解析HTML时能正常识别路径里的#号。
• 但在script标签内直接拼接innerHTML时，Jinja渲染后的路径里的#会被浏览器当成需要编码的特殊字符，转成%23，而Flask的静态文件路由无法识别这个编码后的路径，导致图片加载失败。

解决步骤 #

把Jinja渲染好的路径提前存入JS变量，再在DOM操作中使用这个变量：

<script>
// 服务器端先渲染出正确的图片路径，存入JS变量
const profilePicPath = "{{ url_for('static', filename='#UserData/user/profile/profile_pic.jpg') }}";

// 用模板字符串拼接HTML，避免路径被编码
document.getElementById("image_location").innerHTML += `<img src="${profilePicPath}" width='200' height='200' />`;
</script>

补充说明 #

• 用ES6的模板字符串（反引号`）拼接HTML，能确保变量里的路径原封不动插入，不会被额外编码。
• 不要直接在innerHTML的字符串里嵌套{{url_for()}}，这种写法会让浏览器误解析路径中的特殊字符。

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