[Vue] <img> src綁定props提供的路徑

Vue
Bug

一般直接在<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 "的別稱


© 2021 Hamsterism. All rights reserved github