Flask中用JavaScript动态添加图片时URL编码异常问题

我调用SendChatbotMessage()函数向id为chat的div动态添加图片时，JavaScript会对Jinja模板的url_for代码块进行不必要的URL编码转义。函数代码如下：

function SendChatbotMessage(message) {
    const chatElement = document.getElementById('chat');
    if (chatElement) {
      const htmlCode = `
      <div class="question">
      <div class="img">
          <img src="{{ url_for('static', filename='assets/icon.png') }}" alt="">
      </div>

      <div class="gpt-title">
        ${message}
      </div>
      `;
      chatElement.innerHTML = htmlCode;
    } else {
      console.error("Chat element with ID 'chat' not found!");
    }
  }

预期url_for生成的请求路径应为GET /static/assets/mic.png HTTP/1.1，但实际请求路径变为GET /{{%20url_for('static',%20filename='assets/icon.png')%20}} HTTP/1.1，请问如何避免该问题？

原因分析 #

Jinja模板引擎的语法{{ ... }}仅在服务端渲染页面时会被解析执行，而你的JavaScript代码是在客户端浏览器中运行的，浏览器无法识别Jinja模板标记，会直接把{{ url_for(...) }}当成普通字符串处理，最终导致URL编码转义问题。

解决方法 #

方法1：提前在服务端生成URL并全局存储 #

在页面的服务端渲染区域（比如HTML的<script>标签里），先让Jinja解析url_for生成真实URL，保存到全局变量中，之后JavaScript直接使用这个变量：

<!-- 在HTML的服务端渲染部分添加 -->
<script>
// 服务端渲染时生成静态资源URL，存入全局变量
window.staticIconUrl = "{{ url_for('static', filename='assets/icon.png') }}";
</script>

修改JavaScript函数：

function SendChatbotMessage(message) {
    const chatElement = document.getElementById('chat');
    if (chatElement) {
      const htmlCode = `
      <div class="question">
      <div class="img">
          <img src="${window.staticIconUrl}" alt="">
      </div>

      <div class="gpt-title">
        ${message}
      </div>
      `;
      chatElement.innerHTML = htmlCode;
    } else {
      console.error("Chat element with ID 'chat' not found!");
    }
  }

方法2：直接使用静态资源的绝对路径 #

如果你的静态资源路径固定（比如项目不会修改静态资源的根路径配置），可以直接写死URL，跳过Jinja模板解析：

function SendChatbotMessage(message) {
    const chatElement = document.getElementById('chat');
    if (chatElement) {
      const htmlCode = `
      <div class="question">
      <div class="img">
          <img src="/static/assets/icon.png" alt="">
      </div>

      <div class="gpt-title">
        ${message}
      </div>
      `;
      chatElement.innerHTML = htmlCode;
    } else {
      console.error("Chat element with ID 'chat' not found!");
    }
  }

这种方法简单直接，但后续如果静态资源路径配置变更，需要手动修改代码。

方法3：使用服务端渲染的模板片段克隆 #

在HTML中提前定义一个隐藏的模板片段，让Jinja在服务端渲染时解析url_for，之后JavaScript通过克隆这个片段来生成内容：

<!-- 服务端渲染的隐藏模板片段 -->
<div id="chat-message-template" style="display: none;">
  <div class="question">
    <div class="img">
        <img src="{{ url_for('static', filename='assets/icon.png') }}" alt="">
    </div>
    <div class="gpt-title"></div>
  </div>
</div>

修改JavaScript函数：

function SendChatbotMessage(message) {
    const chatElement = document.getElementById('chat');
    if (chatElement) {
      // 克隆预渲染好的模板片段
      const messageElement = document.getElementById('chat-message-template').firstElementChild.cloneNode(true);
      // 设置消息内容
      messageElement.querySelector('.gpt-title').textContent = message;
      // 添加到聊天容器
      chatElement.appendChild(messageElement);
    } else {
      console.error("Chat element with ID 'chat' not found!");
    }
  }

这种方法避免了字符串拼接HTML的潜在问题，同时保证url_for被正确解析，更符合组件化开发思路。

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