当前位置:网站首页>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 '
}
]
}
}
```
边栏推荐
- The use of list and Its Simulation Implementation
- How to successfully pass the senior system architecture designer in the second half of the year?
- Opencv installation and environment configuration - vs2017
- Deep understanding of Apache Hudi asynchronous indexing mechanism
- 长列表性能优化方案 memo
- 【安装系统】U盘安装系统教程,使用UltraISO制作U盘启动盘
- Cmake learning manual
- 书签整理-程序员常用网站导航
- [pro test feasible] error while loading shared libraries solution
- [untitled]
猜你喜欢
Mpx 插件
ADB utility commands (network package, log, tuning related)
Deep understanding of Apache Hudi asynchronous indexing mechanism
The gun startles the dragon, and the crowd "locks" Zhou Zhi
[untitled]
[actual combat] transformer architecture of the major medical segmentation challenges on the list --nnformer
What does intermediate software evaluator test
SQL Server 知识汇集9 : 修改数据
[installation system] U disk installation system tutorial, using UltraISO to make U disk startup disk
Différences entre les contraintes monotones et anti - monotones
随机推荐
Wallhaven wallpaper desktop version
SQL Server knowledge gathering 9: modifying data
[pytorch 07] hands on deep learning chapter_ Preliminaries/ndarray exercises hands-on version
[untitled]
Go-Redis 中间件
【PyTorch 07】 动手学深度学习——chapter_preliminaries/ndarray 习题动手版
[untitled]
Unity websocket server
uniapp 在onLaunch中跳转页面后,点击事件失效解决方法
How to get hardware information in unity
The eighth training assignment
2021 summary and 2022 outlook
2022.7.5DAY597
Deep understanding of Apache Hudi asynchronous indexing mechanism
Use load_ decathlon_ Datalist (Monai) fast loading JSON data
【机器学习 03】拉格朗日乘子法
[C #] the solution of WinForm operation zoom (blur)
Ffmpeg record a video command from RTSP
Hash / (understanding, implementation and application)
Arduino board description