Vue Cli 3 - Use Background Image in Style Tag

vue cli 3 – use background image in style tag

As Max Martynov, highlighted in the comments, you should use url('~@/assets/image.svg').

 

Webpack has some specific rules when resolving assets^[1].

In order to resolve an alias (@), as you are using, it is mandatory webpack handles the request as a module request. Using the prefix ~ enforces webpack to treat the request as a module request, similar to require('some-module/image.svg').

 

References

1. https://vuejs-templates.github.io/webpack/static.html#asset-resolving-rules

Vue3 css background-image injection

As an alternative to setting the variable dynamically as a CSS class via v-bind(), it's also possible to bind as inline style:

<template>
    <header :style="{backgroundImage: `url('$imageUrl')`}"></header>
</template>

See https://vuejs.org/guide/essentials/class-and-style.html#binding-inline-styles

how to set background image url for local files?

When you're using relative paths, Webpack is unable to resolve them properly if they are found inside your inline style attributes. Webpack, can, however, resolve the image path properly if it is use as an <img> element source in the template directly. Therefore, the solution to use a resolved image path as a CSS attribute is to simply reference it as a computed property.

In your template, you can use v-bind:style="heroImage" to reference a computed property:

<template>
  <div id="app">
    <div v-bind:style="heroImage">
        Content without background image
    </div>
  </div>
</template>

Then, in your VueJS component itself, you can do:

computed: {
  heroImage() {
    return {
      backgroundImage: `url${require('../assets/images/HeroImg.jpg')}`
    };
  }
}

Vue.js data-bind style backgroundImage not working

The issue is that the value for backgroundImage needs to be a string like this:

<div class="circular" v-bind:style="{ backgroundImage: 'url(' + image + ')' }"></div>

Here's a simplified fiddle that's working: https://jsfiddle.net/89af0se9/1/

Re: the comment below about kebab-case, this is how you can do that:

<div class="circular" v-bind:style="{ 'background-image': 'url(' + image + ')' }"></div>

In other words, the value for v-bind:style is just a plain Javascript object and follows the same rules.

UPDATE: One other note about why you may have trouble getting this to work.

You should make sure your image value is quoted so that the end resulting string is:

url('some/url/path/to/image.jpeg')

Otherwise, if your image URL has special characters in it (such as whitespace or parentheses) the browser may not apply it properly. In Javascript, the assignment would look like:

this.image = "'some/url/path/to/image.jpeg'"

or

this.image = "'" + myUrl + "'"

Technically, this could be done in the template, but the escaping required to keep it valid HTML isn't worth it.

More info here: Is quoting the value of url() really necessary?

How can I setting CSS background in vue-cli 3?

your url is not a relative or webpack url , and it has to be in double quote

if you want to use relative url it has to be url("../style/images/close.png");

if you want to use webpack

in vue.config.js

const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir);
}
module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set("@", resolve("src"))
  }
}

in css:

background: url("@/style/images/close.png");

Vue style (background-image) binding not reactive

It's not working because of the semicolons you put at the end of url() directives, css rules set in object notation with Vue don't require semicolons :)

---

Related Topics