vue动态渲染本地路径图片不显示的解决方案,v-fro 渲染本地图片路径不显示

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;
      }
    },
  },
相关推荐
哆啦A梦15881 小时前
点击Top切换数据
前端·javascript·vue.js
小光学长2 小时前
基于Vue的2025年哈尔滨亚冬会志愿者管理系统5zqg6m36(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
@PHARAOH2 小时前
WHAT - 受控组件和非受控组件
前端·javascript·react.js
麦麦大数据3 小时前
D027 v2 vue+django+neo4j 基于知识图谱红楼梦问答系统 (新增问关系功能;新增知识节点和关系管理功能,neo4j增删改查功能)
vue.js·django·问答系统·知识图谱·neo4j·图谱管理·neo4j增删改查
专注前端30年4 小时前
【JavaScript】reduce 方法的详解与实战
开发语言·前端·javascript
菜鸟una5 小时前
【瀑布流大全】分析原理及实现方式(微信小程序和网页都适用)
前端·css·vue.js·微信小程序·小程序·typescript
专注前端30年5 小时前
2025 最新 Vue2/Vue3 高频面试题(10月最新版)
前端·javascript·vue.js·面试
Highcharts.js5 小时前
选择合适的组合:如何打造数据可视化的“黄金组合”
javascript·信息可视化·highcharts·交互式图表开发
angelQ6 小时前
Vue 3 中 ref 获取 scrollHeight 属性为 undefined 问题定位
前端·javascript
我的div丢了肿么办6 小时前
js函数声明和函数表达式的理解
前端·javascript·vue.js