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

场景一：public目录下的图片

public目录

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

Bash

?

1 2	<!--'/images/'+图片名称，这种属于绝对路径，/指向public目录 --> <img src="/images/image.png">

 

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

src目录

 

• 通过import引入图片

Bash

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

 

通过require引入图片

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

 

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

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