使用v-html渲染含img标签的静态图片时路径解析失败求助

这个问题的核心在于：v-html渲染的内容是在浏览器端解析的，相对路径是相对于当前页面的URL，而不是你项目里的src目录结构。你配置了copy-webpack-plugin把src/assets的文件复制到打包后的目录，但HTML字符串里的../assets/logo.png路径在浏览器里是找不到对应资源的。

下面给你几个可行的解决方案：

方案1：直接修改HTML字符串里的路径为绝对路径 #

因为copy-webpack-plugin会把src/assets/logo.png复制到打包后的dist/assets/logo.png（假设你的输出目录是dist），所以浏览器能通过绝对路径/assets/logo.png访问到图片。修改后的HTML字符串应该是：

<img src="/assets/logo.png" /><br/><p>Hello World</p>

方案2：通过webpack处理图片路径（推荐动态场景） #

如果你的HTML字符串是动态生成的，或者不想硬写绝对路径，可以在Vue组件里通过require或import获取图片的正确打包后URL，再替换到字符串中：

// 在Vue组件的script部分
export default {
  data() {
    return {
      // 用require获取webpack处理后的图片URL
      logoUrl: require('@/assets/logo.png'),
      htmlStr: ''
    }
  },
  created() {
    // 替换HTML字符串里的路径
    this.htmlStr = `<img src="${this.logoUrl}" /><br/><p>Hello World</p>`
  }
}

这样webpack会自动处理图片路径，生成适配打包后环境的正确URL，不管你部署在哪个路径下都能正常访问。

方案3：检查copy-webpack-plugin的配置 #

确保你的插件配置正确，确实把src/assets下的文件复制到了目标目录。比如你的webpack配置应该类似这样：

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  // ...其他配置
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        { 
          from: 'src/assets', // 源目录
          to: 'assets' // 目标目录（相对于输出目录dist）
        }
      ]
    })
  ]
}

这个配置会把src/assets下的所有文件（包括logo.png）复制到dist/assets目录下，保证浏览器能通过/assets/logo.png访问到。

另外提醒一句：如果你的HTML字符串来自用户输入，使用v-html时要注意XSS安全风险，建议先做内容过滤。

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