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來獲取到正確的地址后，返回出去。

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