Vue 3 + Webpack 5图片加载异常：src前缀出现chrome-extension

针对你遇到的图片路径被加上chrome-extension前缀、无法正常显示的问题，试试以下几个排查方向：

• 用Webpack 5内置Asset模块替代file-loader/url-loader
  Webpack 5已经原生支持资源文件处理，无需再依赖file-loader/url-loader，旧loader可能和新特性冲突。先卸载file-loader：

npm uninstall file-loader

然后修改Webpack配置，使用内置的asset/resource：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'assets/[name][ext]' // 输出路径和src/assets对应，确保资源能正确访问
        }
      }
    ]
  }
}

• 调整Vue组件中图片路径的引用方式
  Vue 3模板中的相对路径可能未被正确解析，改用导入式引用：

<script setup>
import logo from './assets/logo.png'
</script>

<template>
  <div>
    <img :src="logo" />
  </div>
</template>

或者用require动态引入：

<template>
  <div>
    <img :src="require('./assets/logo.png')" />
  </div>
</template>

• 排查Chrome扩展的干扰
  chrome-extension前缀基本是浏览器扩展劫持了资源请求导致的，直接禁用所有Chrome扩展后刷新页面测试。重点排查广告拦截、资源修改类扩展（比如AdBlock、Tampermonkey）。

• 检查Webpack的publicPath配置
  确保output.publicPath设置正确，避免资源路径解析错误：

module.exports = {
  output: {
    publicPath: '/' // 根据部署环境调整，比如本地开发用'/'，静态部署用'./'
  }
}

• 清理缓存并重新构建
  删除Webpack缓存目录（如node_modules/.cache）或Vue CLI的缓存，然后重新执行构建命令：

rm -rf node_modules/.cache
npm run serve

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