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>
·
一、正常的引入,但是得在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>
用法有很多,虽然有麻烦和简单,但是只要能得到我们想要的结果,那就是好的办法,这是初学者的习惯,欢迎各路大神指点新的用法
更多推荐
已为社区贡献1条内容
所有评论(0)