Vue道具未加载图像或视频源

Question

我正在制作组件，这些组件允许我定义要显示的内容，并为资产提供url，无论是图像还是视频，但当我使用非组件默认的有效资产定义道具时，它不会加载视频或图像。

父组件：

<PosterMedium
Video__Background
Video__Background__Source = "@/assets/videos/keyboard.mp4"
Poster__Title = "Upgrade your workflow"
Poster__Description = "Add to your productivity with our tools, build from the ground up on UIX with modern design trends in mind, all together to give you a powerful arsenal to boost your workflow. "
/>

子组件

<template>
<div class="poster" :key="Poster__Title">
<div v-if="Photo__Background" :style="poster__image__background"></div>
<div v-if="Video__Background" :style="poster__video__background">
<video id="background__video" autoplay loop muted>
<source :src="Video__Background__Source" type="video/mp4"/>
</video>
</div>
<!--rest of code-->
</template>
<script>
export default {
name: "PosterMedium",
components: {
},
props: {
Photo__Background__Source: {
type: String,
default: "@/assets/VRtualisLogoFontConverted.svg"
},
Video__Background__Source: {
type: String,
default: "@/assets/videos/keyboard.mp4"
}
//...
},
data() {
return {
poster__image__background: {
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
backgroundImage: 'url('+ this.Photo__Background__Source +')',
backgroundSize: 'cover',
backgroundPosition: 'center',
}
//...
}
}
}
</script>

问题是，当我将源代码作为原始html放入时，它运行良好，但一旦我尝试通过props传递它，它就会在加载资产时出现问题，我已经尝试过使用:src="require(Video__Background__Source)"，但这只会完全杀死组件。

视频给了我最大的问题，当我选择使用道具时，我不想完全加载，但使用道具和它的默认字符串时，图像很好，只是视频源不想与道具有任何关系，或者它是默认字符串。

Answer 1

只需要在组件道具中使用:Prop = "require('<source>')"再次感谢@MichalLevý

p.s对于背景图像，我只是选择了使用相同修复的普通图像。