Vue项目引入图片的两种场景和三种方式

场景一：public目录下的图片

public目录

• public目录下的图片引入方式：

Bash

场景二：在src目录下的图片

src目录

• 通过import引入图片

Bash

//第一步：import引入
import errGif from '@/assets/401_images/401.gif'
//第二步:关联变量
data() {
    return {
      errGif: errGif
    }
  },
//第三步:img标签动态访问

• 通过require引入图片

//关联变量时使用require
data() {
    return {
      errGif: require('@/assets/401_images/401.gif')
    }
  },
//或者直接在img标签使用

其中@在Vue.config.js进行配置并指向src目录:

configureWebpack: {
    name: name,
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
  },