问题描述:
定义了一个数组,数组里面装的有图片的路径,使用for循环渲染页面时,图片路径对但是图片不显示。
解决办法:数组里面图片的路径要写成如下:
image:require('../assets/img/login.png')
渲染的时候要写
<img :src="item.image" />
具体事例
<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: '首页' },
{
key: '/account/consumptive-volume',
name: 'account/consumptiveVolume',
src: require('@/assets/image/account/consumptiveVolume.png'),
title: '卡券管理'
},
{
key: '/account/order',
name: 'account/order',
src: require('@/assets/image/account/order.png'),
title: '订单管理'
},
{
key: '/account/bill',
name: 'account/bill',
src: require('@/assets/image/account/bill.png'),
title: '交易记录'
},
{
key: '/account/community',
name: 'account/community',
src: require('@/assets/image/account/community.png'),
title: '我的圈子'
},
{
key: '/account/message',
name: 'account/message',
src: require('@/assets/image/account/message.png'),
title: '消息中心'
},
{
key: '/account/base-setting',
name: 'account/baseSetting',
src: require('@/assets/image/account/baseSetting.png'),
title: '账号中心'
}
]
}
}
动态的怎么办?
调用自定义方法!
<div class="item_box" v-for="(item,index) in homeData" :key="index">
<!-- <img :src="`@/assets/images/home/${item.imgUrl}.png`" class="item_img"/> -->这样写也不行哦,因为动态渲染需要加入require,但是require无法直接字符串拼接,所以需要自定义一个方法
<img :src="bindImg(item.imgUrl)" class="item_img"/>
<!-- <img src="@/assets/images/home/house_owner.png" class="item_img"/> -->
<div class="item_title">{{ item.title }}</div>
<div class="item_title2">{{ item.title2 }}</div>
<div class="item_title3">{{ item.text }}</div>
</div>
methods:{
bindImg(url){
return require('@/assets/images/home/'+url+'.png');
}
}
数据引入
// @/assets/images/home/house.png
const homeData = [
{
id: 1,
imgUrl: 'house.png',
title: '管理',
title2: 'management',
text: '描述'
},
];
export {
homeData,
}