当前位置:网站首页>V-for img SRC rendering fails
V-for img SRC rendering fails
2022-07-07 11:08:00 【Have a good time I】
Problem description :
An array is defined , The path with pictures in the array , Use for When the page is rendered in a loop , The picture path is right, but the picture does not show .
terms of settlement : The path of the image in the array should be written as follows :
image:require('../assets/img/login.png')
Write when rendering
<img :src="item.image" />
Specific examples
<a-menu
v-for="(v, i) in navData"
:key="i"
:default-selected-keys="['/account/home']"
:selected-keys="[v.key]"
mode="inline"
type="inner"
class="accout_menu"
@openChange="onOpenChange"
>
<a-menu-item key="v.key">
<router-link :to="{ name: v.name }">
<img :src="v.src" class="menu_account_image" />
<span class="menu_account_title">{
{
v.title }}</span>
</router-link>
</a-menu-item>
</a-menu>
data() {
return{
navData: [
{
key: '/account/home', name: 'account/home', src: require('@/assets/image/account/home.png'), title: ' home page ' },
{
key: '/account/consumptive-volume',
name: 'account/consumptiveVolume',
src: require('@/assets/image/account/consumptiveVolume.png'),
title: ' Card and voucher management '
},
{
key: '/account/order',
name: 'account/order',
src: require('@/assets/image/account/order.png'),
title: ' Order management '
},
{
key: '/account/bill',
name: 'account/bill',
src: require('@/assets/image/account/bill.png'),
title: ' Transaction records '
},
{
key: '/account/community',
name: 'account/community',
src: require('@/assets/image/account/community.png'),
title: ' My circle '
},
{
key: '/account/message',
name: 'account/message',
src: require('@/assets/image/account/message.png'),
title: ' Message center '
},
{
key: '/account/base-setting',
name: 'account/baseSetting',
src: require('@/assets/image/account/baseSetting.png'),
title: ' Account Center '
}
]
}
}
```
边栏推荐
- A case of compiling QT file qmake compiling script
- 2021-04-08
- Still cannot find RPC dispatcher table failed to connect in virtual KD
- Project ERROR: Unknown module(s) in QT: core gui
- Go Slice 比较
- 2022.7.5DAY597
- mif 文件格式记录
- Deeply understand the characteristics of database transaction isolation
- The sixth training assignment
- TypeScript 接口继承
猜你喜欢
【亲测可行】error while loading shared libraries的解决方案
P1223 queuing for water /1319: [example 6.1] queuing for water
[untitled]
在线硬核工具
Unity script visualization about layout code
Transaction rolled back because it has been marked as rollback only
[pro test feasible] error while loading shared libraries solution
Idea shortcut keys
Qtcreator sets multiple qmake
【OneNote】无法连接到网络,无法同步问题
随机推荐
Deeply understand the characteristics of database transaction isolation
From pornographic live broadcast to live broadcast E-commerce
香橙派OrangePi 4 LTS开发板通过Mini PCIE连接SATA硬盘的操作方法
Mendeley -- a free document management tool that automatically inserts references into papers
Bookmarking - common website navigation for programmers
[pro test feasible] error while loading shared libraries solution
Ffmpeg record a video command from RTSP
Introduction to shell programming
2021 summary and 2022 outlook
[OneNote] can't connect to the network and can't sync the problem
The fifth training assignment
滚动踩坑--UNI_APP(八)
【推薦系統 01】Rechub
IDEA快捷键大全
Transaction rolled back because it has been marked as rollback only
Kitex retry mechanism
Wallhaven壁纸桌面版
mif 文件格式记录
seata 1.3.0 四種模式解决分布式事務(AT、TCC、SAGA、XA)
MPX plug-in