nuxt.js - how to set css background image dynamicaly

Question

Im using Nuxt.js, and have a custom component.

This component has css in the component that sets a background image using css.

I've tried the following but I get an error when I run this. The error is:

 invalid expression: Invalid regular expression flags in

Component

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

Magick · Accepted Answer · 2018-01-25 06:11:37Z

17

I found the answer on https://github.com/nuxt/nuxt.js/issues/2123.

Basically, in the component do:

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

answered Jan 25, 2018 at 6:11

Magick

5,16225 gold badges76 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jason Awbrey Over a year ago

Just to note, this isn't specific to Nuxt, rather it's just a Vue template convention for binding a data value to the style attribute on an HTML element.

Quickee · Accepted Answer · 2020-04-09 19:47:57Z

12

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

I made the same mistake thinking this was a nuxtjs problem. Webpack uses syntax to resolve assets.

~ enforces webpack to treat the request as a module request. And then @ start at root.

answered Apr 9, 2020 at 19:47

Quickee

3311 gold badge7 silver badges15 bronze badges

Comments

Hamed Jafarzadeh · Accepted Answer · 2020-12-13 10:47:52Z

7

This is also another example using a combination of require and url to resolve an asset.

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

answered Dec 13, 2020 at 10:47

Hamed Jafarzadeh

1112 silver badges2 bronze badges

Comments

cds · Accepted Answer · 2020-08-31 12:41:46Z

5

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

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

answered Aug 31, 2020 at 12:41

cds

4094 silver badges5 bronze badges

1 Comment

Istrel Over a year ago

adding a verbal explanation is often helpful

KitKit · Accepted Answer · 2018-01-26 03:53:50Z

1

You can write it normally but in '': 'background-image'

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

answered Jan 26, 2018 at 3:53

KitKit

9,66315 gold badges65 silver badges90 bronze badges

Comments

SNO · Accepted Answer · 2022-02-20 13:19:14Z

1

Overall I recommend using nuxt-image

There you can define the images per resolution (media-query). Using the $img-feature you can also define it as background-image:

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

answered Feb 20, 2022 at 13:19

SNO

8961 gold badge15 silver badges42 bronze badges

1 Comment

Miguel Stevens Over a year ago

I'm using nuxt image at the moment, Is using the $img, the recommended way to get background images to work while keeping the sizing properties?

LW001 · Accepted Answer · 2023-08-06 16:16:28Z

So, require doesn't work in my Nuxt3 w/ Vite app and I get the nasty 500 error with 'require not defined'.

This is my solution using import in the parent page and passing it via props:

Parent Component:

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

Child Component:

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

astrowq · Accepted Answer · 2021-03-03 09:27:48Z

-1

The official documentation provides the solution already, see: https://nuxtjs.org/docs/2.x/directory-structure/assets#images

All you need to do is to remove the slash:

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

For really dynamic image e.g. ${image}.jpg:

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

answered Mar 3, 2021 at 9:27

astrowq

292 bronze badges

Collectives™ on Stack Overflow

nuxt.js - how to set css background image dynamicaly

8 Answers 8

1 Comment

Comments

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

1 Comment

Comments

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related