VUE2 v-for 图片不显示解决方法

「已注销」

已于 2022-04-07 18:57:46 修改

阅读量708

点赞数

分类专栏： VUE 文章标签： vue js

于 2020-11-22 11:18:15 首次发布

本文链接：https://blog.youkuaiyun.com/zwhy123/article/details/109922912

版权

VUE 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了在Vue2项目中，使用v-for遍历本地图片时遇到无法显示的问题及三种解决方案：1. 在图片路径前添加'/'；2. 确保图片文件夹路径正确；3. 通过import引入图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div>
	<ul>
		<li v-for="item in items">
			<img :src="item.src">
			{{item.id}}
		</li>
	</ul>
</div>

<script>
	export default{
		data(){
			return{
				items:[{
					src:'../img/1.jpg',
					id:'1'
				},
				{
					src:'../img/2.jpg',
					id:'2'
				}]
			}
		}
	}
</script>

如上代码所示，当我们把图片存在本地时，这种写法图片是无法正常显示的，这里有三个简单的方法：

src:require('../img/1.jpg') 在路径前加require
将图片放在public文件夹中，路径一定要写对
用import引入图片

<script>
	import img1 from '../img/1.jpg',
	import img2 from '../img/2.jpg',
	
	export default{
		data(){
			return{
				items:[{
					src:img1,
					id:'1'
				},
				{
					src:img2,
					id:'2'
				}]
			}
		}
	}
</script>