vue src图片路径地址动态拼接的方法

方式一
<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 绑定一个函数，然后在methods中定义这个函数，函数内部还是使用require来获取到正确的地址后，返回出去。

?

1 2 3 4 5 6

<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);
}