当前位置:网站首页>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')
}
]
}
},```
边栏推荐
- Process32First返回false,错误x信息24
- [shutter -- layout] detailed explanation of the use of align, center and padding
- 小程序纪录
- Redis principle and use - Basic Features
- MySQL transaction
- 解决“NOTE: One or more layouts are missing the layout_width or layout_height attributes.”
- Basic use of ArcGIS 1
- Conditions for JVM to trigger minor GC
- antUI中a-modal 拖拽功能制作
- Qt | 关于如何使用事件过滤器 eventFilter
猜你喜欢

Windows下Redis哨兵模式搭建

Bloom filter

STM32+MFRC522完成IC卡号读取、密码修改、数据读写

Redis principle and use - Basic Features

2022 chemical automation control instrument operation certificate test question simulation test platform operation

Paper notes: knowledge map kgat (unfinished temporary storage)

docker配置mysql集群

volatile 靠的是MESI协议解决可见性问题?(上)

arc-gis基础操作3

Zipkin installation and use
随机推荐
malloc分配空间失败,并且不返回null
Process32First返回false,错误x信息24
大二上第三周学习笔记
phpexcel导出emoji符号报错
ZXing简化版,转载
cocoapods的安装和使用
Sliding window, double pointer, monotone queue, monotone stack
【Mysql】Mysql锁详解(三)
OnTap 9 file system limitations
神经网络与深度学习-6- 支持向量机1 -PyTorch
Zipkin installation and use
使用openLayer画箭头
【线上问题】Timeout waiting for connection from pool 问题排查
The provincial government held a teleconference on safety precautions against high temperature weather across the province
大二上第二周学习笔记
Go intelligent robot alpha dog, alpha dog robot go
暑假第四周
微信小程序学习笔记2
Object 的Wait Notify NotifyAll 源码解析
Under a directory of ext3 file system, subfolders cannot be created, but files can be created