vue之src图片路径地址动态拼接的方法。
很常见的需求了。根据后台返回的数据,展示本地对应的图片。这个时候,需要对图片地址的src进行拼接。由于静态资源路径,在vue的template和script中引入是有区别的。方式不对,很容易导致地址有问题。1、方式一:<template><div v-for="(item,index) in menus :key="index><img :src="require(`
·
很常见的需求了。根据后台返回的数据,展示本地对应的图片。这个时候,需要对图片地址的src进行拼接。
由于静态资源路径,方式不对,很容易导致地址有问题。
1、方式一:
<template>
<div v-for="(item,index) in menus :key="index>
<img :src="require(`../../assets/images/${item.icon}`)" />
<span>{{item.name}}</span>
</div>
</template>
后台返回的数据譬如
menus: [
{
"icon": "icon_1.png",
"name: "首页"
},
{
"icon": "icon_2.png",
"name: "副页"
}
]
一句话,在:src
中,使用require
和模板字符串,就可以拼接引入正确的路径地址。
2、方式二,
:src 绑定一个函数,然后在methods中定义这个函数,函数内部还是使用require来获取到正确的地址后,返回出去。
<template>
<div v-for="(item,index) in menus :key="index>
<img :src="bindIcon(item.icon)" />
<span>{{item.name}}</span>
</div>
</template>
bindIcon(icon) {
return require("@/assets/images/"+icon);
}
更多推荐
已为社区贡献1条内容
所有评论(0)