当前位置:网站首页>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')
}
]
}
},```
边栏推荐
- malloc分配空间失败,并且不返回null
- 大二上第五周学习笔记
- 吴恩达机器学习之线性回归
- 语音聊天app源码——钠斯直播系统源码
- The provincial government held a teleconference on safety precautions against high temperature weather across the province
- opencv图像处理
- 大二上第二周学习笔记
- 服务器内存故障预测居然可以这样做!
- Android implements the caching mechanism and caches multiple data types
- arcgis的基本使用1
猜你喜欢

搜索模块用例编写

asp.net 使用redis缓存

Ext4 file system opens dir_ After nlink feature, link_ Use link after count exceeds 65000_ Count=1 means the quantity is unknown

Stm32+mfrc522 completes IC card number reading, password modification, data reading and writing

Neural network and deep learning-6-support vector machine 1-pytorch

(2006, MySQL server has gone away) problem handling

Li Mu D2L (IV) -- softmax regression

PMM(Percona Monitoring and Management )安装记录

docker配置mysql集群

js中树与数组的相互转化(树的子节点若为空隐藏children字段)
随机推荐
v-for动态设置img的src
(2006, MySQL server has gone away) problem handling
选择器的使用
Thread Join 和Object wait 的区别
[MySQL] detailed explanation of redo log, undo log and binlog (4)
如何添加一个PDB
【Mysql】Mysql锁详解(三)
"Could not build the server_names_hash, you should increase server_names_hash_bucket_size: 32"
756. Serpentine matrix
Windows backs up the database locally by command
QT | about how to use EventFilter
Process32First返回false,错误x信息24
微信小程序AvatarCropper 头像裁剪
VectorTileLayer更换style
【Mysql】一条SQL语句是怎么执行的(二)
I'm faded
搜索模块用例编写
自定义密码输入框,无圆角
What is asynchronous operation
注册模块用例编写