Vue динамический c встроенный компонент фонового изображения - PullRequest
Новая
       4

Vue динамический c встроенный компонент фонового изображения

1 голос
/ 26 марта 2020

Я создаю баннер с Vue, который должен иметь динамический c фон, но, похоже, он не работает. Не уверен, что я делаю не так. Я пробовал несколько других способов, и это работает, если я делаю тег изображения, например, 

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

Просмотр 

<PageHero
  backgroundImage="mc-background.png "
  smallLeadingText="Powerful, secure &amp; affordable"
  mainText="Minecraft hosting"
  subText="Plans suitable for all budgets"
/>

1 Ответ

1 голос
/ 26 марта 2020

Похоже, что вы только что получили некоторые синтаксические ошибки в вашем атрибуте style при цитировании строк. Попробуйте 

<div :style="{ backgroundImage: `url(${require('@/assets/images/' + backgroundImage)})` }">

Может быть проще создать некоторые вычисленные свойства для разрешения всего, хотя 

computed: {
  bgImage () {
    return require('@/assets/images/' + this.backgroundImage)
  },
  inlineStyle () {
    return {
      backgroundImage: `url(${this.bgImage})` 
    }
  }
}

и 

<div :style="inlineStyle">

Демо ~ https://codesandbox.io/s/crimson-sky-ehn9r

...