使用vue的时候，动态修改img的引用地址（地址为项目中的，并不是服务器数据），引用失败的问题研究

最新推荐文章于 2024-04-17 14:15:20 发布

原创最新推荐文章于 2024-04-17 14:15:20 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #img动态地址 #img使用本地地址

前端同时被 3 个专栏收录

183 篇文章

订阅专栏

学习

61 篇文章

订阅专栏

爬坑

50 篇文章

订阅专栏

本文介绍在Vue项目中遇到的动态加载图片不显示的问题及解决方案，通过使用require和import方法正确引用图片资源，确保图片能在页面上正常显示。

问题描述

代码如下

<img class="info-picture-main" :src="first.picUrl" alt="ddd" srcset />

      info: {
        picture: [
          {
            title: "测试啊啊啊啊",
            href: "javascript:void(0)",
            picUrl:
              "../assets/info/1.jpg"
          }
        ]
      }

这种引用方法失败，图片是不会显示的

如果不用动态的方法，直接写在src地址栏里面，是可以的

<img class="info-picture-main" :src="../assets/info/1.jpg" alt="ddd" srcset />

解决方案

使用require

<img class="info-picture-main" :src="first.picUrl" alt="ddd" srcset />

      info: {
        picture: [
          {
            title: "测试啊啊啊啊",
            href: "javascript:void(0)",
            picUrl: require("../assets/info/1.jpg")
          }
        ]
      }

使用import

<img class="info-picture-main" :src="first.picUrl" alt="ddd" srcset />

import pic1 from "../assets/info/1.jpg";
export default {
  data() {
    return {
      info: {
        picture: [
          {
            title: "学校召开引进人才暨青年教师代表座谈会dddddddddddddddddd",
            href: "javascript:void(0)",
            picUrl:pic1 
          }
        ]
      }
    };
  }
};