一般直接在<img> src寫路徑的話,如
<img src="../assets/image/icarry-NoImageAvailable.png" alt="" />
Vue compile完不會有問題,會轉換成例如下面這種結果
但如果是用v-bind:src的方式從props取得路徑字串的話,是會報錯的Ovo
(You can try it)
解法
用require(`your-image-route`)
<template>的部分
<img :src="require(`@/assets/image/${image}`)" alt="product image" />
<script>內props的部分
image: { type: String, default: "icarry-NoImageAvailable.png", },
註記:@是Vue project預設webpack內表示" /src "的別稱