vue v-for 循环图片 三种方法

一、正常的引入，但是得在static下创建image文件夹

<view v-for="item in list">
	<text>{{item.name}}</text>
	<view class=""></view>
	text>{{item.age}}</text>
	<view class=""></view>
	<image :src="item.img" mode=""></image>
</view>
<script>
	export default {
		data (){
			return {
				list : [
					{
						name : "张三",
						 age : 18,
						 img: '../../static/image/9f1ab00154e5bb96d9cd7c5dbb29c9f.jpg'
					},
					{
						name : "张165",
						 age : 18,
						 img:'../../static/image/9f1ab00154e5bb96d9cd7c5dbb29c9f.jpg'
					},
					{
						name : "李四",
						 age : 17,
						 img:'../../static/image/9f1ab00154e5bb96d9cd7c5dbb29c9f.jpg'
					},
					]
			}
		}


	}
</script>

二、import来引入，不需要在static下创建image文件夹

<view v-for="item in list">
	<text>{{item.name}}</text>
	<view class=""></view>
	text>{{item.age}}</text>
	<view class=""></view>
	<image :src="item.img" mode=""></image>
</view>
<script>
import img1 from "@/static/image/9f1ab00154e5bb96d9cd7c5dbb29c9f.jpg"
import img2 from "@/static/image/微信图片_20200730152340.jpg"
import img3 from "@/static/image/微信图片_20200730152404.jpg"
	export default {
		data (){
			return {
				list : [
					{
						name : "张三",
						 age : 18,
						 img : img1 
					},
					{
						name : "张165",
						 age : 18,
						 img : img2 
					},
					{
						name : "李四",
						 age : 17,
						 img : img3
					},
					]
			}
		}


	}
</script>

三、require()来引入，不需要在static下创建image文件夹

<view v-for="item in list">
	<text>{{item.name}}</text>
	<view class=""></view>
	text>{{item.age}}</text>
	<view class=""></view>
	<image :src="item.img" mode=""></image>
</view>
<script>
	export default {
		data (){
			return {
				list : [
					{
						name : "张三",
						 age : 18,
						 img : require('../../static/image/微信图片_20201024141117.jpg')
					},
					{
						name : "张165",
						 age : 18,
						 img : require('../../static/image/微信图片_20201024141117.jpg')
					},
					{
						name : "李四",
						 age : 17,
						 img : require('../../static/image/微信图片_20201024141117.jpg')
					},
					]
			}
		}


	}
</script>

用法有很多，虽然有麻烦和简单，但是只要能得到我们想要的结果，那就是好的办法，这是初学者的习惯，欢迎各路大神指点新的用法