解决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