子組件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()只能接收常量

總結

以上是生活随笔為你收集整理的解决vue中父组件传图片路径src给子组件却无法正常显示图片的原因的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。