浅谈在vue-cli3项目中解决动态引入图片img404的问题

首先，出现图片404错误的原因可能有多种，但在vue-cli3项目中常见的错误是因为在引入图片时直接使用了相对路径而导致的。

解决这个问题的方法是使用require语法，在vue组件中通过require引入图片文件，再通过绑定v-bind:src动态绑定图片的路径，即可避免出现404错误。

具体的步骤如下：

1. 下载并安装file-loader

在项目中使用require语法需要依赖file-loader，并将图片打包成base64格式嵌入到代码中。通过npm安装file-loader：

npm install file-loader --save-dev

1. 在vue.config.js中配置file-loader

为file-loader配置公共路径publicPath和打包文件的存放路径outputPath。

示例代码：

module.exports = {
  // 公共路径
  publicPath: '/',
  // 打包输出目录
  outputDir: 'dist',
  // file-loader配置
  chainWebpack: config => {
    config.module
      .rule('images')
      .use('url-loader')
      .loader('url-loader')
      .options({
        limit: 10240
      })
  }
}

1. 在vue组件中使用require引入图片文件

使用require引入图片文件并将其赋值给组件中的变量。

示例代码：

<template>
  <img :src="imgUrl"/>
</template>
<script>
export default {
  data() {
    return {
      imgUrl: require('@/assets/images/11.jpg')
    }
  }
}
</script>

通过上述步骤即可成功避免在vue-cli3项目中出现图片404错误。同时，这种方法也可以在组件中使用动态绑定v-bind:src的方式来动态显示图片。

另外，如果在vue组件中不使用require语法而直接使用相对路径引入图片文件，可以在vue.config.js中为webpack配置alias，将@指定为项目根目录。示例代码：

module.exports = {
  // 公共路径
  publicPath: '/',
  // 打包输出目录
  outputDir: 'dist',
  // webpack别名配置
  configureWebpack: {
    resolve: {
      alias: {
        '@': resolve(__dirname, './src')
      }
    }
  }
}

配置完成后，就可以直接在vue组件中通过相对路径引入图片了。例如：

<template>
  <img :src="require('@/assets/images/11.jpg')"/>
</template>