解決vue中父組件傳圖片路徑src給子組件卻無法正常顯示圖片的原因

 

子組件Cover.vue

<div>
<div class="cover">
<img :src="src" />
...
</div>
</div>

props: {
src: {
type: String,
required: true,
},
}

父組件

// 引入子組件
<Cover src="@/assets/images/hello.png"></Cover>

在瀏覽器打開后，圖片無法正常顯示。
原因：在父組件中src的值被當作是普通字符串傳給子組件，所以子組件只會當字符串處理，不會當作路徑處理。

解決：結合require使用
父組件：

// 引入子組件
<Cover :src="require('@/assets/images/hello.png')"></Cover>

注意:require()只能接收常量
————————————————
原文鏈接：https://blog.csdn.net/meoncih_/article/details/107647809