The solution that vue dynamically renders the local path image does not display, v-fro renders the local image path does not display (record the pit in the project).

1. If you directly use the local path rendering, it cannot be rendered, because in this case, a network request will be sent to add your local address when rendering, so it cannot be rendered .

 How can I find the path like this? The solution is as follows

// 渲染正常渲染即可
<div v-for="(item, index) in imgPath" :key="index">
      <img :src="item" alt="">     
</div>

data() {
    return {
      //   使用require()包裹路径，网络路径就不需要这样直接渲染即可
      imgPath: [
        require("../assets/images/img1.jpg"),
        require("../assets/images/img2.jpg"),
      ],
    };
  },

 At this point, the following path is not the path of the local image.

2. The second solution

<div class="box">
    <div v-for="(item, index) in imgPath" :key="index">
      <img :src="require('../assets/images/' + item)" alt="" />
      <!-- 核心要点:required 引入路径需要拼接 不能直接required(imgpath) -->    
 </div>

 data() {
    return {
      imgPath: ["img1.jpg", "img2.jpg"],
    };
  },

- Take a look at my image storage file

3. The third solution solves png

  :src="getImgUrl(companyLogoList[index], 'jpg')" // 可以解决png

 data() {
    return {
      companyLogoList: [
        "img1.jpg",
        "img2.jpg",
      ],
    };
  },

 methods: {
    getImgUrl(url, type) {
      if (type == "png") {
        const a = require("../assets/images/" + url + ".png");
        return a;
      } else if (type == "jpg") {
        const b = require("../assets/images/" + url);
        console.log("b", b);
        return b;
      }
    },
  },