Vue 道具不加载图像或视频源答案

【问题标题】：Vue props not loading image or video sourcesVue 道具不加载图像或视频源
【发布时间】：2021-04-11 05:00:36
【问题描述】：

我正在制作允许我定义要显示的内容并为资产提供 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 输入时，它工作正常，但是一旦我尝试通过道具传递它，它就会在加载资产时出现问题，我已经尝试过使用:src="require(Video__Background__Source)" 但这只会完全杀死组件。

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

【问题讨论】：

标签： javascript vuejs3

【解决方案1】：

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

附言对于背景图片，我只是选择了使用相同修复的普通图片。

【讨论】：