Vue3中v-html渲染含resize参数的img src出现undefined问题求助

你遇到的是Vue3中v-html处理带有resize=690px:*参数的图片URL时，:*被替换为undefined的问题——这是Vue3与Vue2在动态HTML内容解析逻辑上的差异导致的，Vue3对插入的HTML内容做了更严格的语法检查与转义处理，URL中的*被误识别为模板相关的特殊符号，进而被替换为undefined。

• 转义URL特殊字符：将URL里的*转义为URL编码格式%2A，修改后的图片地址如下：

  https://img.webmd.com/vim/live/webmd/consumer_assets/site_images/sponsored_programs/toc-breaking-barriers-mtnbc/infographic.png?resize=690px:%2A&output-quality=75
  

  转义后Vue3不会将其识别为特殊语法，能正常解析参数。

• 绕过v-html手动插入DOM：如果v-html的处理逻辑仍有问题，可在组件mounted钩子中直接创建图片元素并插入DOM，避免v-html的自动解析：

  <template>
    <div class="article-body"></div>
  </template>
  
  <script>
  export default {
    mounted() {
      const imgEl = document.createElement('img');
      imgEl.src = 'https://img.webmd.com/vim/live/webmd/consumer_assets/site_images/sponsored_programs/toc-breaking-barriers-mtnbc/infographic.png?resize=690px:*&output-quality=75';
      document.querySelector('.article-body').appendChild(imgEl);
    }
  }
  </script>
  

• 用原始字符串定义内容：在JavaScript中用String.raw包裹HTML字符串，确保特殊字符不被意外转义：

  data() {
    return {
      articleContent: String.raw`<img src="https://img.webmd.com/vim/live/webmd/consumer_assets/site_images/sponsored_programs/toc-breaking-barriers-mtnbc/infographic.png?resize=690px:*&output-quality=75" />`
    }
  }
  

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