vue引入前端工程内的图片

一、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>