当前位置:网站首页>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')
}
]
}
},```
边栏推荐
猜你喜欢

Redis principle and use - Basic Features

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

asp.net 使用redis缓存

js中树与数组的相互转化(树的子节点若为空隐藏children字段)

arc-gis基础操作3

el-table实现增加/删除行,某参数跟着变

【Mysql】一条SQL语句是怎么执行的(二)
![[MySQL] how to execute an SQL statement (2)](/img/7b/53f8756458cc318e2f417b1cc0c3f8.png)
[MySQL] how to execute an SQL statement (2)

【Mysql】认识Mysql重要架构(一)

Arc GIS basic operation 3
随机推荐
Exception handling mechanism II
JS - DataTables control on the number of displays per page
Force button list question
Local cache
sublime 安装插件
选择器的使用
Innovus is stuck, prompting x error:
Redis principle and usage - installation and distributed configuration
When you click input, the border is not displayed!
点击input时,不显示边框!
如何添加一个PDB
asp.net 使用redis缓存(二)
微信小程序AvatarCropper 头像裁剪
【线上问题】Timeout waiting for connection from pool 问题排查
Stm32+mfrc522 completes IC card number reading, password modification, data reading and writing
Paper notes: knowledge map kgat (unfinished temporary storage)
【Mysql】一条SQL语句是怎么执行的(二)
OnTap 9 file system limitations
MySql5.7.25源码安装记录
I'm faded