Javascript Vue动态背景图像内联组件

我正在用Vue构建一个需要动态背景的横幅，但是，它似乎不起作用。不知道我做错了什么。我尝试了其他一些方法，如果我做一个像这样的图像标签，它会起作用

<img :src="require(`@/assets/images/${backgroundImage}`)" />

但显然，这需要一个内联背景图像

代码：

组成部分

<template>
  <div
    class="w-full h-64 bg-auto bg-no-repeat bg-center lg:bg-cover relative"
    :style="{ backgroundImage: url(require('@/assets/images/' + backgroundImage))}"
  >
    <div class="w-full h-full flex flex-col justify-center items-center text-white px-6">
      <div class="hero-text rounded text-center py-8 px-12">
        <p class="text-base lg:text-md uppercase font-medium">{{ smallLeadingText }}</p>
        <h1 class="text-xl md:text-3xl lg:text-5xl uppercase font-bold">{{ mainText }}</h1>
        <p class="text-base lg:text-md">{{ subText }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PageHero",
  props: {
    backgroundImage: String,
    smallLeadingText: {
      type: String,
      required: false
    },
    mainText: {
      type: String,
      required: true
    },
    subText: {
      type: String,
      required: false
    }
  }
};
</script>

{{{smallLeadingText}
{{mainText}}
{{subText}
导出默认值{
姓名：“PageHero”，
道具：{
背景图片：字符串，
smallLeadingText：{
类型：字符串，
必填项：false
},
正文：{
类型：字符串，
必填项：true
},
潜台词：{
类型：字符串，
必填项：false
}
}
};

看法

---

看起来您的

样式

属性中有一些关于字符串引用的语法错误。试一试

---

但是，创建一些计算属性来解决所有问题可能会更容易

计算：{
bgImage（）{
返回要求（'@/assets/images/'+this.backgroundImage）
},
inlineStyle（）{
返回{
backgroundImage:`url（${this.bgImage}）`
}
}
}

及

---

演示~

你能举个例子@Phil吗？如果你不介意，那么我尝试了你的代码@Phil，但是如果我删除了

：style

代码显示没有背景，它就会删除代码。我可能在评论中弄错了什么，所以我将其移动到下面的答案。我当然更喜欢使用计算属性，而不是做所有的事情。仅供参考，我总是发现传递道具时最好使用烤肉串的属性名称，即

background image=“mc background.png”

。请参阅，因此我尝试了您的代码，但如果我删除：样式，则代码会删除代码gyazo.com/09f006c0bdef0215651924a9f30037b，即使使用计算的路由，代码也会在没有背景的情况下显示。对于这两个示例，相同的问题只是将组件显示为注释的

，而实际上不会使用

样式
绑定显示。@debugabug工作正常为了我。我已经添加了一个演示链接嘿，这里是一个小视频正在发生什么，不知道为什么，因为一切都是正确的，给出了示例链接@debugabug浏览器控制台中有三个错误。它们是什么？
<PageHero
  backgroundImage="mc-background.png "
  smallLeadingText="Powerful, secure &amp; affordable"
  mainText="Minecraft hosting"
  subText="Plans suitable for all budgets"
/>