一、public目录下的图片

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

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

二、src目录下的图片

先在vue.config.js进行配置@，并指向src目录：

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

1、通过import引入图片

1.1、import引入

import errGif from '@/assets/401_images/401.gif'

1.2、关联变量

data() {return {errGif: errGif}
},

1.3、img标签动态访问

<img :src="errGif" width="313" height="428">

2、require引入图片

1.1、关联变量时使用require

data() {return {errGif: require('@/assets/401_images/401.gif')}
}

1.2、img标签中使用require

<img :src="require('@/assets/401_images/401.gif')" />

三、动态引入项目图片

一和二事例都是引入项目中指定的图片，但是有些时候可能需要根据数据动态引入项目中不同的图片。这种情况如果把所有图片都import或require进来，然后赋值变量，最后在template的img中拼接src变量，会发现无法显示图片，代码如下所示：

<template><div v-for="item in [1, 2]"><img :src="`img${item}`" /></div>
</template><script>
import img2 from '@/assets/images/2.png'export default {data() {return {img1: require('@/assets/images/1.png'),img2}}
}
</script>

 这种情况下可以通过在src中使用require引入图片，拼接对应路径，实现解决，如下所示：

<div v-for="(name, index) in ['1', '2']" :key="index"><img :src="require(`@/assets/form_head/${name}.png`)" />
</div>