Vue.js中JSON传入的img标签无法渲染，p标签正常的问题求助

核心原因 #

1. URL编码破坏HTML结构：路由query参数会自动对特殊字符（如<、>、引号、斜杠）进行URL编码，导致img标签的属性被转义，渲染时无法识别有效路径。
2. 资源路径解析失败：若img使用Vue项目的@别名（如@/assets/xxx.png），浏览器无法识别webpack的别名规则，必须转换为浏览器可访问的绝对路径或base64格式。

解决方案 #

1. 修复HTML内容传递时的编码问题 #

传递前将HTML内容转为JSON字符串，接收后再解析还原，避免URL编码破坏标签结构：

发送页面修改：

<div class="faq-item-btn">
  <div @click="send($t('faqs.faq2.title'), $t('faqs.faq2.content'))">
    <img slot="icon" src="@/assets/img/ico_next.png">
  </div>
</div>

send(title, content) {
  this.$router.push({
    path: "/faqitem",
    query: {
      title: title,
      content: JSON.stringify(content) // 将HTML转为JSON字符串传递
    },
  })
}

接收页面修改：

<div class="content">
  <h3>{{ title }}</h3>
  <div v-html="content"></div>
</div>

methods: {
  sendContent(){
    this.title = this.$route.query.title;
    // 解析JSON字符串，还原HTML内容
    this.content = this.$route.query.content ? JSON.parse(this.$route.query.content) : '';
  }
},
created(){
  this.sendContent();
}

2. 处理本地图片路径问题 #

如果content中的img引用本地资源，需提前将@别名转换为浏览器可识别的路径：

• 在i18n配置或JSON数据源中，使用require()获取资源的实际路径：

// 示例：i18n配置文件
export default {
  faqs: {
    faq2: {
      title: "问题标题",
      content: `<p>正常显示的段落</p><img src="${require('@/assets/img/your-image.png')}" alt="图片描述">`
    }
  }
}

• 若为在线图片，确保src是完整的http/https绝对路径。

3. 生产环境安全提示 #

直接渲染HTML存在XSS攻击风险，建议使用DOMPurify对内容进行过滤：

1. 安装依赖：npm install dompurify
2. 在接收页面处理：

import DOMPurify from 'dompurify';

methods: {
  sendContent(){
    this.title = this.$route.query.title;
    const rawContent = this.$route.query.content ? JSON.parse(this.$route.query.content) : '';
    this.content = DOMPurify.sanitize(rawContent); // 过滤恶意代码
  }
}

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