当前位置:网站首页>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')
}
]
}
},```
边栏推荐
- Android implements the caching mechanism and caches multiple data types
- 多层嵌套后的 Fragment 懒加载实现
- Innovus is stuck, prompting x error:
- php执行shell脚本
- C# Serialport的发送和接收
- What are CSDN spaces represented by
- Fiddler抓包工具之移动端抓包
- Basic use of ArcGIS 4
- Ext4 file system opens dir_ After nlink feature, link_ Use link after count exceeds 65000_ Count=1 means the quantity is unknown
- [MySQL] how to execute an SQL statement (2)
猜你喜欢
随机推荐
Li Mu D2L (IV) -- softmax regression
Error: cannot find module 'UMI' problem handling
Solve "note: one or more layouts are missing the layout_width or layout_height attributes."
Selection and practice of distributed tracking system
2B and 2C
PHP一次请求生命周期
Use of off heap memory
[MySQL] how to execute an SQL statement (2)
您的登录IP不在管理员配置的登录掩码范围内
Byte buffer stream & character stream explanation
STM32+MFRC522完成IC卡号读取、密码修改、数据读写
php执行shell脚本
arcgis的基本使用4
Exception handling mechanism II
The problem of the sum of leetcode three numbers
Ext4 file system opens dir_ After nlink feature, link_ Use link after count exceeds 65000_ Count=1 means the quantity is unknown
Qt | 关于如何使用事件过滤器 eventFilter
Mysql事务
2B和2C
839. Simulation reactor








