解决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()只能接收常量