Vue3中v-html渲染图片时URL的?被替换为undefined的问题

• 排查字符串生成逻辑的插值错误
  如果fedArticleContentDesktop是用模板字符串生成的，比如写过${url}?resize=xxx这类代码，要确认url变量有没有在某个环节变成undefined——哪怕你在钩子中打印的最终字符串是对的，也要追溯上游生成逻辑，有没有隐性的赋值失误。比如：

  // 错误示例：url变量未正确赋值会导致?被替换成undefined
  const url = undefined;
  const html = `<img src="${url}?resize=690px:*&output-quality=75" />`;
  

• 检查第三方HTML处理工具的篡改
  如果这个HTML字符串经过了富文本编辑器、HTML清理库这类工具处理，有些工具会把?当成模板占位符误替换成undefined。可以直接在模板里写死测试字符串：

  <div class="article-body" v-html='`<img alt="" src="https://example.com/image/example_image_650x735.jpg?resize=690px:*&output-quality=75"  />`'></div>
  

  要是这样渲染正常，说明问题出在fedArticleContentDesktop的生成或处理环节。

• 验证组件内的二次处理逻辑
  确认有没有通过watch或computed对fedArticleContentDesktop做过正则替换之类的二次处理，会不会误把?替换成了undefined；另外也要排查全局指令、插件有没有拦截修改v-html的内容。

• 查看浏览器实际渲染的DOM
  别只看控制台打印，右键检查元素看img的src实际值，或者看网络请求里的图片URL，确认是不是真的是undefined替换了?，排除控制台显示误差。

• 排查字符串编码问题
  如果字符串是后端返回的，检查有没有编码异常，比如?被转义成%3F后又被错误解析，不过这个情况导致undefined的概率较低，可以作为补充排查点。

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