vue动态渲染本地路径图片不显示的解决方案，v-fro 渲染本地图片路径不显示（记录一下项目中的坑）。

原创已于 2022-01-24 11:22:22 修改 · 3.4k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2022-01-24 11:19:37 首次发布

项目中的问题专栏收录该内容

18 篇文章

订阅专栏

本文介绍了在Vue项目中正确加载和渲染本地图片的方法。通过三种不同的方式展示如何使用require函数或其他技巧确保图片资源能够被正确加载。这些方法解决了直接使用本地路径导致的渲染失败问题。

1、如果直接使用本地路径渲染是渲染不出来的，因为这种情况下渲染时会发送网络请求加你的本地地址所以渲染不出来。

这样怎么能找到路径？解决方案如下

// 渲染正常渲染即可
<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"),
      ],
    };
  },

此时后面的路径就不是本地图片的路径了

2、第二种方案解决

<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"],
    };
  },

- 来看一下我的图片存放文件

3、第三种解决方案解决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;
      }
    },
  },