CODEWITHSUNDEEP
cssvue.jsvue-cli
iamrobin.
iamrobin.

Reputation: 1634

vue cli 3 – use background image in style tag

I want to use a svg image from my assets folder in one of my components as a background-image. Here is an example of my component:

<template>
  <div class="container"></div>
</template>

<script>
export default {
  name: 'component'
}
</script>

<style scoped lang="scss">
.container {
  height: 40px;
  width: 40px;
  background-image: url('@/assets/image.svg');
}
</style>

But the image doesn't show. The Path is correct. Where is my mistake? Thanks for your help.

Upvotes: 86

Views: 98440

Answers (8)

Sam
Sam

Reputation: 1707

I've got it like this; when doing npm run dev or build, both work as expected in vue 3.4+ composition api with vite 5+.

// in script setup
const getImageUrl = (path) => new URL(path, import.meta.url).href;

<!-- in template -->
<div :style="{'background' : 'url('+ getImageUrl('./assets/myimg.jpg') +')'}"></div>

Upvotes: -1

Obirieni Simeo
Obirieni Simeo

Reputation: 99

If you are using Vue 3 (TypeScript) and Vite 3.2+, in your vite.config.ts, set your base appropriately as shown below.

import { defineConfig } from 'vite';

export default defineConfig({
  base: process.env.NODE_ENV === 'production' ? '/subfolder/' : '/',
});

The base option is used for specifying the base URL of your application, and it automatically handles the resolution of asset paths.

Then if your image, img.jpg, is in public/images folder, you can reference it in your css as:

background-image: url('/images/img.jpg');

Upon building for production, this will be resolved to:

background-image: url('/subfolder/images/img.jpg');

Upvotes: 0

leejongseo dev
leejongseo dev

Reputation: 1

If your vuejs uses file-loader, you'll take advantage of import.

<template>
  <div class="container"></div>
</template>

import image from @/assets/image.svg
<script>
export default {
  name: 'component'
}
</script>

<style scoped lang="scss">
.container {
  height: 40px;
  width: 40px;
  background-image: url(image);
}
</style>

Upvotes: 0

Manuel Reyes
Manuel Reyes

Reputation: 333

What worked for me was the following:

  1. Move the desired image to the public folder (myapp/public/assets/myimage.png)
  2. Build the project. This will move the assets from the public folder to the dist folder.

npm run build

  1. Now you can use your image in the component like this:
<div :style="{background: 'url(' + '\'/assets/myimage.png\'' + ') no-repeat 0 3px'}"  ></div>

Upvotes: 1

Joe L.
Joe L.

Reputation: 4643

Make sure the image extension is lowercase. If the image has an uppercase extension, change it to be lowercase otherwise it won't work.

<style lang="scss">
  .section{
    background-image: url('~@/assets/photos/DSC08611.jpg'); //WORKED!
    background-image: url('~@/assets/photos/DSC08611.JPG'); //DID NOT WORK
  }

</style>

Upvotes: 8

A Kingscote
A Kingscote

Reputation: 450

This is what worked for me.

<div
  class="image"
  v-for="(image, imageIndex) in slideshow"
  :key="imageIndex"
  :style="{ backgroundImage: 'url(' + require(`@/assets/${image}`) + ')', width: '300px', height: '200px' }"
></div>

Where slideshow looks like:

data() {
      return {
        slideshow : [
          "MyImages/1.png",
          "MyImages/2.png"
        ]
      }

Upvotes: 1

j.raymond
j.raymond

Reputation: 1885

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

Upvotes: 156

CarlosZ
CarlosZ

Reputation: 1124

I would recommend using style binding. I found this thread really helpful link.

Here an example using bootstrap cards

    <div
      class="card-image"
      :style="{ backgroundImage: 'url(' + require('@/assets/images/cards.jpg') + ')' }">

The image is in src/assets/images/cards.jpg

Upvotes: 42

Related Questions