vue中使用v-for循环动态加载图片(:src)失败的解决方法

在vue中使用v-for循环动态加载图片,如果img的src为url链接地址时,图片可以显示出来;但是一旦换成本地静态图片资源,加载就出现了问题,图片碎裂,无法加载。

使用url链接时,图片正常动态加载:

<template>
	<van-swipe class="goods-swipe" :autoplay="3000">
		<van-swipe-item v-for="thumb in goods.thumbs" :key="thumb">
			<img :src="thumb" alt="apple"/>  //图片可以动态加载
		</van-swipe-item>
	</van-swipe>
</template>

<script>
export default{

}
data() {
	return {
		goods: {
			thumbs: [
				'https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg',
				'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg'
			]
		}
	};
},
</script>

当在目录文件夹assets文件中创建了一个images文件夹,并放置两个图片后,在代码中使用图片相对路径地址,出现无法加载图片的问题:
vue中使用v-for循环动态加载图片(:src)失败的解决方法_第1张图片

<template>
	<van-swipe class="goods-swipe" :autoplay="3000">
		<van-swipe-item v-for="thumb in goods.thumbs" :key="thumb">
			<img :src="thumb" alt="apple"/>  //图片可以动态加载
		</van-swipe-item>
	</van-swipe>
</template>

<script>
export default{

}
data() {
	return {
		goods: {
			thumbs: [
				'../../assets/images/apple1.jpg',
				'../../assets/images/apple1.jpg'
			]
		}
	};
},
</script>

经过多方寻找答案之后,终于找到了解决方法:
1、在引入图片路径的时候使用require方式引入图片;
2、使用ES6的import方式引入图片。

template中组件不变,修改script中data中的数据,如下:

//require方式
<script>
export default{
	data() {
		return {
			goods: {
				thumbs: [
					require('../../assets/images/apple1.jpg'),
					require('../../assets/images/apple1.jpg')
				]
			}
		};
	},
}
</script>

//import方式
<script>
import apple1 from '../../assets/images/apple1.jpg';
import apple2 from '../../assets/images/apple2.jpg';

export default{
	data() {
		return {
			goods: {
				thumbs: [apple1, apple2]
			}
		};
	},
}
</script>

现在我只知道解决方法,具体原因还不能理解,所以无法正确解释,还请大家多方面搜索知识,自行理解。
我理解的大概意思是模块加载解析问题。

参考:
vue的 v-for 循环中图片加载路径问题
import和require的区别
webpack中文网

你可能感兴趣的:(vue)