#1.在使用vue加载普通静态图片时，可以直接使用相对路径

例如：<img src="../../static/logo.png" alt="" style="width:200px; height:100px">
显示效果如下:

#2.在使用vue动态加载图片时，必须使用require，

例如。我这里用element-ui的轮播图做演示。

 <el-carousel-item v-for="item in images" :key="item.id">
           <img :src="item.url" alt="" style="width:100%;height:100%">
         </el-carousel-item>

data() {
      return {
        images:[{url:require('../../static/imgs/roll/1.jpg')},
              {url:require('../../static/imgs/roll/3.jpg')},
              {url:require('../../static/imgs/roll/4.jpg')},
              {url:require('../../static/imgs/roll/5.jpg')}],
      }

显示效果如下:

#3…vue引用磁盘(本机，桌面图片)，绝对路径

首先需要注意，在vue项目中加载项目外的图片，比如c盘下面的图片
，是不可以的，项目会报错。找不到
原因是vue默认拒绝，

解决办法：将你需要的图片，添加到项目文件夹的static文件下，使用局部引入的方式进行引用。即可

#4.使用require的原因，为什么使用require才能动态的引用图片：

原因:在vue中，直接使用路径的方式引用的图片，在vue编译后，浏览器是会自动转码为base64的。
但是如果使用变量的话，浏览器是不会自动将图片转码为base64的，所以也不会报错，但是图片就是显示不出来。

关键:require，能够使变量中保存的图片地址，转码为base64

当图片转码为base64之后，图片才可以正常显示。所以必须使用require。