nuxt.js - 如何动态设置CSS背景图片

Question

我正在使用 Nuxt.js，并且有一个自定义组件。

该组件在使用css设置背景图片的组件中有css。

我已尝试以下操作，但运行时出现错误。 错误是：

 invalid expression: Invalid regular expression flags in

组件

<template>
  <section class="bg-img hero is-mobile  header-image" v-bind:style="{ backgroundImage: 'url(' + image + ')' }">
    <div class="">
      <div class="hero-body">
        <div class="container">
          <h1 class="title">
            {{ result }}
          </h1>
          <h2 class="subtitle ">
            Hero subtitle
          </h2>
        </div>
      </div>
    </div>

</section>
</template>

<script>

export default {
  props: ['result', 'image']
}
</script>


<style>



.bg-img {
        background-image: url(~/assets/autumn-tree.jpg);
        background-position: center center;
        background-repeat:  no-repeat;
        background-attachment: fixed;
        background-size:  cover;
        background-color: #999;

 }

</style>

Answer 1

我在https://github.com/nuxt/nuxt.js/issues/2123找到了答案。

基本上，在组件中执行以下操作：

<div :style="{ backgroundImage: `url(${backgroundUrl})` }">Content with background here</div>

Answer 2

url('~@/assets/autumn-tree.jpg')

我犯了同样的错误，认为这是一个 nuxtjs 问题。 Webpack 使用语法来解析资产。

~ 强制 webpack 将请求视为模块请求。 然后@从根目录开始。

Answer 3

这也是使用 require 和 url 组合来解析资产的另一个示例。

   <b-col cols="8" class="hj_projectImage justify-content-center text-center" :style="{backgroundImage: `url(` + require(`~/assets/ProjectPictures/${this.ProjectPicture}`) + `)`}">
  </b-col>

Answer 4

<template>
  <div>
    <div class="backgroundImage" :style="{ backgroundImage: `url(${backgroundImagePath})` }">
  </div>
</template>

<script>
import backgroundImagePath from '~/assets/image.jpeg'
export default {
  data() {
    return { backgroundImagePath }
  }
}
</script>

Answer 5

你可以正常写，但是在 '': 'background-image'

v-bind:style="{ 'background-image': 'url(' + api.url + ')' }"

Answer 6

总的来说，我建议使用nuxt-image

您可以在此处定义每个分辨率的图像（媒体查询）。 使用 $img-feature 您还可以将其定义为背景图像：

export default {
  computed: {
    backgroundStyles() {
      const imgUrl = this.$img('https://github.com/nuxt.png', { width: 100 })
      return {
        backgroundImage: `url('${imgUrl}')`
      }
    }
  }
}

Answer 7

所以，require 在我的 Nuxt3 w/ Vite 应用程序中不起作用，我收到了令人讨厌的 500 错误，提示“require not Defined”。

这是我的解决方案，在父页面中使用 import 并通过 props 传递它：

父组件：

<template>
  <div class="flex flex-col h-screen">
    <NavHeader />
    <HeroPage
      :pageImage="pageImage"
    />
    <NavFooter />
  </div>
</template>

<script>
//Import the banner image.
import pageImage from "~/assets/banner/page-banner-about-us.jpg";

export default {
  data() {
    return {
      pageImage: pageImage
    };
  },
};
</script>

子组件：

<template>
  <div
    class="mx-auto relative block w-[1200px] top-0 z-10 overflow-hidden mt-0 mb-0 bg-cover py-16 rounded-b-lg"
    :style="bgImage"
  >
  </div>
</template>

<script>
export default {
  props: {
    pageImage: {
      type: String,
      default: "",
    },
  },

  data() {
    return {
      bgImage: {
        "background-size": "cover",
        "background-image": `url(${this.pageImage})`,
      },
    };
  },
};
</script>

Answer 8

官方文档已经提供了解决方案，参见：https://nuxtjs.org/docs/2.x/directory-struct/assets#images

您需要做的就是删除斜杠：

background-image: url("~assets/autumn-tree.jpg");

对于真正动态的图像，例如

${image}.jpg

：

<img :src="require(`~/assets/img/${image}.jpg`)" />