当前位置:网站首页>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 '
}
]
}
}
```
边栏推荐
- TypeScript 接口继承
- 变量的解构赋值
- Mendeley -- a free document management tool that automatically inserts references into papers
- [recommendation system 02] deepfm, youtubednn, DSSM, MMOE
- After the uniapp jumps to the page in onlaunch, click the event failure solution
- Poj1821 fence problem solving Report
- 從色情直播到直播電商
- 深入理解Apache Hudi异步索引机制
- Network foundation (1)
- Unity script generates configurable files and loads
猜你喜欢
Basic knowledge of process (orphan, zombie process)
I plan to take part in security work. How about information security engineers and how to prepare for the soft exam?
2022年7月10日“五心公益”活动通知+报名入口(二维码)
Arduino board description
【机器学习 03】拉格朗日乘子法
[installation system] U disk installation system tutorial, using UltraISO to make U disk startup disk
【pyqt】tableWidget里的cellWidget使用信号与槽机制
[C #] the solution of WinForm operation zoom (blur)
P1223 queuing for water /1319: [example 6.1] queuing for water
[actual combat] transformer architecture of the major medical segmentation challenges on the list --nnformer
随机推荐
Go redis Middleware
Arduino receives and sends strings
JS implementation chain call
How to play video on unityui
2021-04-23
Network engineer test questions and answers in May of the first half of 2022
TypeScript 接口继承
Which securities company is the best and safest to open an account for the subscription of new shares
[système recommandé 01] rechub
A simple example of delegate usage
【亲测可行】error while loading shared libraries的解决方案
Still cannot find RPC dispatcher table failed to connect in virtual KD
uniCloud
Qtcreator sets multiple qmake
[untitled]
The concept, implementation and analysis of binary search tree (BST)
Unity downloads files through the server address
Wallhaven wallpaper desktop version
单调性约束与反单调性约束的区别 monotonicity and anti-monotonicity constraint
Mysql的json格式查询