v-for循环图片无法显示？

起因：在想利用element ui来实现一个走马灯的轮播效果，利用v-for来遍历渲染图片和文字信息，但当使用自以为的src路径写法时候缺无法正常渲染

一：发现问题：

<el-carousel :interval="4000" type="card" height="500px">
 
  <el-carousel-item v-for="item in batteryNameArr" :key="item.index">
    <!-- <h3 class="medium">{{ item   }}</h3> -->
    <img :src="item.src" alt="">

    <div class="btn">
      <el-button type="primary" plain @click="goto(item.index)">查看电池信息</el-button>
      <el-tag type="success">{{item.name}}</el-tag>
      <el-button @click="other" type="primary" plain >寿命预测</el-button>
    </div>
  </el-carousel-item>
</el-carousel>

batteryNameArr: [
  {
    index: 0,
    name: 'CH35',
    src: '../assets/img/1.png',
  },
  {
    index: 1,
    name: 'CH23',
    src: '../assets/img/2.png',
  },
  {
    index: 2,
    name: 'CH42',
    src: '../assets/img/3.png',
  },
  {
    index: 3,
    name: 'CH30',
    src: '../assets/img/4.png',
  },
  {
    index: 4,
    name: 'CH7',
    src: '../assets/img/5.png',
  },
  {
    index: 5,
    name: 'CH15',
    src: '../assets/img/6.png',
  },
],

二：解决问题

1. 将本地图片上传图床，使用在线链接

一开始始终寻找不到解决问题的办法，无奈下直接将其上传至图床，不再使用本地图片资源，但觉得很笨，肯定有更好地办法

batteryNameArr: [
  {
    index: 0,
    name: 'CH35',
    // src: '../assets/img/1.png',
    src: 'https://awesomeboy.oss-cn-chengdu.aliyuncs.com/img/202306061953201.png',
  },
  {
    index: 1,
    name: 'CH23',
    // src: '../assets/img/2.png',
    src: 'https://awesomeboy.oss-cn-chengdu.aliyuncs.com/img/202306061953201.png',
  },
  {
    index: 2,
    name: 'CH42',
    // src: '../assets/img/3.png',
    src: 'https://awesomeboy.oss-cn-chengdu.aliyuncs.com/img/202306061953201.png',
  },
  {
    index: 3,
    name: 'CH30',
    // src: '../assets/img/4.png',
    src: 'https://awesomeboy.oss-cn-chengdu.aliyuncs.com/img/202306061953201.png',
  },
  {
    index: 4,
    name: 'CH7',
    // src: '../assets/img/5.png',
    src: 'https://awesomeboy.oss-cn-chengdu.aliyuncs.com/img/202306061953201.png',
  },
  {
    index: 5,
    name: 'CH15',
    // src: '../assets/img/6.png',
    src: 'https://awesomeboy.oss-cn-chengdu.aliyuncs.com/img/202306061953201.png',
  },
],

2.使用require调用路径

src: require(‘../assets/img/2.png’)

batteryNameArr: [
  {
    index: 0,
    name: 'CH35',
    src: require('../assets/img/1.png'),
  },
  {
    index: 1,
    name: 'CH23',
    src: require('../assets/img/2.png'),
  },
  {
    index: 2,
    name: 'CH42',
    src: require('../assets/img/3.png'),
  },
  {
    index: 3,
    name: 'CH30',
    src: require('../assets/img/4.png'),
  },
  {
    index: 4,
    name: 'CH7',
    src: require('../assets/img/5.png'),
  },
  {
    index: 5,
    name: 'CH15',
    src: require('../assets/img/6.png'),
  },
],

三：探究原因: 为什么vue中引入图片需要使用require

简单一句话因为动态添加src被当做静态资源处理了，没有进行编译，所以要加上require

1. 什么是静态资源，什么是动态资源？

静态资源就是直接存放在项目中的资源，这些资源不需要我们发送专门的请求进行获取。比如assets目录下面的图片，视频，音频，字体文件，css样式表等。

动态资源就是需要发送请求获取到的资源。

2. 为什么动态添加的src会被当做静态资源处理？

先看这个代码图片被编译成的样子是什么样的

1
2
3

<el-carousel-item v-for="item in batteryNameArr" :key="item.index">
        <img :src="item.src" alt="">
</el-carousel-item>

batteryNameArr: [
       {
         index: 0,
         name: 'CH35',
         src: '../assets/img/1.png',
       },
     ],

该图片无法正常显示

利用require调用资源，编译后会变成这个样子，该图片是正常显示的。

batteryNameArr: [
   {
     index: 1,
     name: 'CH23',
     src: require('../assets/img/2.png'),
   },
 ],

在vue中动态添加的src最终会编译成一个静态的字符串地址。程序运行的时候，会按照这个地址去项目目录中引入资源。而去项目目录中引入资源的这种方式，就是将该资源当成了静态资源

正因为动态的添加的src编译过后的地址，与图片资源编译过后的资源地址不一致，导致无法正确的引入资源

使用静态的地址去引入一张图片，图片的路径和图片的名称已经发生了改变，并且编译后过后的静态地址是可以成功的引入资源的。这是因为，在默认情况下，src目录下面的所有文件都会被打包，src下面的图片也会被打包在新的文件夹下并生成新的文件名。编译过后的静态地址引入的是打包过后的图片地址，从而可以正确的引用资源

3. 为什么调用require就可以正常使用图片？

因为动态添加的src，编译过后的文件地址和被编译过后的资源文件地址不一致，从而无法正确引入资源。而使用require，返回的就是资源文件被编译后的文件地址，从而可以正确的引入资源