Vue项目使用Img标签(遍历)无法显示

最新推荐文章于 2025-06-26 10:18:47 发布

原创最新推荐文章于 2025-06-26 10:18:47 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

自己的杂记专栏收录该内容

24 篇文章

订阅专栏

本文档详细介绍了在Vue项目中，使用`<img>`标签遍历显示图片时遇到的问题，主要原因是使用了`require`关键字并且没有使用引号包裹图片路径。示例代码展示了正确和错误的图片引用方式，并提供了代码仓库链接供参考。问题解决方案包括将`require`关键字替换为相对路径或绝对路径的方式。

主要原因：img的地址使用require 关键词，并且不适用单引号和双引号

data() {
  	return {
  		title: 'Hello',
  		curr: 'Test',
		dataArr: [
		        {
		          title: "收入",
		          data: "¥13820.00",
		          bgc: "background:#FFF0C9;",
		           url:require("../assets/logo.png")
				   // url:"../assets/logo.png"
		        },
		        {
		          title: "订单",
		          data: "82",
		          bgc: "background:#DDFFCA;",
		           url:require("../assets/logo.png")
				   // url:"../assets/logo.png"
		        },
		        {
		          title: "患者",
		          data: "182",
		          bgc: "background:#BFF2FF;",
		          url:require("../assets/logo.png")
				  // url:"../assets/logo.png"
		        },
		        {
		          title: "在线医生",
		          data: "31",
		          bgc: "background:#BAC3FF;",
		          url:require("../assets/logo.png")
				  // url:"../assets/logo.png"
		        }
		      ]
  	}

使用的时候：

	  <div v-for="item in dataArr" :key="item.title">
	    {{ item.data }}
		<img :src="item.url"/>
	  </div>

例程地址：https://gitee.com/wangqingyuan1/vue-main-baseline

commit： 7e56f7a2f2883ce48508a2bf95ff64cf0111685c

参考：vue项目使用img标签(遍历)无法显示 – 追梦~北极星