Vue.js组件内无法引入图片的问题求助

架构老林

2026-7-21

Vue 图片加载失败的解决方案

核心问题与修复步骤

1. 静态资源路径解析问题

Vue 项目中，webpack 对静态资源的路径有特定处理规则，以下是针对不同场景的修复：

<img> 标签直接引用：
使用 @ 别名指向 src 目录（Vue CLI 默认配置），避免相对路径的层级问题：
```
<img alt="Facebook icon" src="@/assets/icons/facebook-header.svg" />
```
v-bind:src 动态绑定：
动态引入时需通过 require() 获取资源，且在 ES 模块环境下需取 default 属性：
```
<img v-bind:src="require('@/assets/icons/facebook-header.svg').default" alt="Facebook icon" />
```

内联样式背景图：
直接写相对路径不会被 webpack 解析，必须用 require() 引入资源后拼接为 URL：

<script>
export default {
  data() {
    return {
      image: {
        backgroundImage: `url(${require('@/assets/icons/facebook-header.svg').default})`
      }
    }
  }
}
</script>

2. webpack 配置检查（手动配置场景）

若未使用 Vue CLI，需确保 webpack 正确处理图片资源：

安装依赖：npm install file-loader --save-dev

添加 webpack 规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(svg|png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'assets/icons/',
              name: '[name].[hash:8].[ext]'
            }
          }
        ]
      }
    ]
  }
}