CODEWITHSUNDEEP
htmlvue.js
Question3r
Question3r

Reputation: 3832

how to set background image url for local files?

I want to paste a relative image url to a div to set it as the background image. Unfortunately the div won't render the image. So this works fine and renders the image

<img src="../assets/images/HeroImg.jpg">

but this one doesn't

<div style="background-image: url(../assets/images/HeroImg.jpg)">
    Content goes here
</div>

Things I also tried:

What is the correct url to use for background images?

Update

I'm using VueJs so things might be different here? Steps to reproduce:

.

<template>
  <div id="app">
    <div>
      This works:
    </div>
    <div>
      <img src="./assets/images/HeroImg.jpg">
    </div>
    <div>
      This doesn't work:
    </div>
    <div style="background-image: url('./assets/images/HeroImg.jpg')">
        Content without background image
    </div>
  </div>
</template>

You will see that the img tag renders the image but not the div with the background image.

Upvotes: 2

Views: 19344

Answers (6)

Stephen
Stephen

Reputation: 195

Terry's answer did the trick but I needed an extra set of parentheses around the url tag content:

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

Upvotes: 5

vikash vishwakarma
vikash vishwakarma

Reputation: 69

Try in css file like this

background-image: url('~src/assets/home-page-img/header-bg.jpg');

Upvotes: 0

Terry
Terry

Reputation: 66218

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')}`
    };
  }
}

Upvotes: 4

Harshith J Poojary
Harshith J Poojary

Reputation: 331

I think you have not specified height and width property.

div {
    width: 60px;
    height: 60px;
    border: 1px solid black;
}
<div style="background-image: url(https://s3.amazonaws.com/media.skillcrush.com/skillcrush/wp-content/uploads/2017/04/Blog_coding-game.jpg.webp)"></div>

Upvotes: -1

teddcp
teddcp

Reputation: 1624

You should wrap them with quotes.

From MDN, we need to wrap the path or url of the image into a

background-image: url("../../media/examples/lizard.png");

<div style="background-image: url(../assets/images/HeroImg.jpg)">
    Content goes here
</div>

Suggestion:

Better to avoid the inline styles. you can include the style in an external sheet.

Upvotes: 0

ShrewdStyle
ShrewdStyle

Reputation: 520

html

<div class="yourDivClass">
    Content goes here
</div>

css

.yourDivClass {
  background: url('../assets/images/HeroImg.jpg') no-repeat center center / cover
}

Upvotes: 0

Related Questions