当前位置:网站首页>V-for dynamically sets the SRC of img
V-for dynamically sets the SRC of img
2022-07-26 09:26:00 【44w0】
Encountered this problem in project development , Let's summarize the record .
problem : utilize v-for Set picture dynamically , The picture path is written as shown in the following figure , Picture not shown found
<div v-for="(item,index) in classify" :key="index" class="cart">
<img :src="item.img" alt="">
<div>
<p>{
{item.title}}</p>
<p>{
{nums[index]}}</p>
</div>
</div>
// Traversal data :
data () {
return {
classify:[
{
title:" Total number of projects ",
img:require('@/assets/images/point/1.png')
},
{
title:" Total points ",
img:require('@/assets/images/point/2.png')
},
{
title:" Total working points ",
img:require('@/assets/images/point/3.png')
},
{
title:" Total bonus points ",
img:require('@/assets/images/point/4.png')
}
]
}
},
Checked the , error stay :
- In the traversal array img The path is written , however for Loop traversal img Of src The path will be parsed into a string , Not the path , Cause path error
Solution :
- In the array img assignment , Add require(), after img Of src This will not be resolved to a string
Insert a code chip here data () {
return {
classify:[
{
title:" Total number of projects ",
img:require('@/assets/images/point/1.png')
},
{
title:" Total points ",
img:require('@/assets/images/point/2.png')
},
{
title:" Total working points ",
img:require('@/assets/images/point/3.png')
},
{
title:" Total bonus points ",
img:require('@/assets/images/point/4.png')
}
]
}
},```
边栏推荐
猜你喜欢
随机推荐
Force button list question
760. String length
Qt | 关于如何使用事件过滤器 eventFilter
WARNING: [pool www] server reached pm.max_children setting (5), consider raising it
大二上第一周学习笔记
v-premission添加权限
字节缓冲流&字符流详解
[MySQL] detailed explanation of MySQL lock (III)
微信小程序学习笔记1
malloc分配空间失败,并且不返回null
[arkit, realitykit] turn pictures into 3D models
Sending and receiving of C serialport
微信小程序AvatarCropper 头像裁剪
点击input时,不显示边框!
Redis principle and use - Basic Features
什么是异步操作
音视频知识
sublime 安装插件
tabbarController的使用
解决“NOTE: One or more layouts are missing the layout_width or layout_height attributes.”