Vue-cli: CSS background images not working

[PrimozRome]

If I add background-image: url('some-image.jpg') CSS property to some element it does now show up in my app inside browser... Any idea why?

[yyx990803]

Use relative paths if you can. Paths without ./ are treated as root paths.

[PrimozRome]

Tried that as well but does not make any difference... Here's how I am trying to do it with my app.vue

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data () {
    return {
      shared_state: window.shared_state
    }
  }
}
</script>

<style lang="stylus">
body
  direction: ltr;
  background: url('./assets/img/bg1.jpg')

#app
    height: 100%;
</style>

[yyx990803]

Tested and it's working for me. Please provide a reproduction repo.

[PrimozRome]

@yyx990803

Hi. It is working, looks like I am having some problems when I have added support for Stylus... I will try to figure it out what is happening.

One question though... do I have to use file paths inside vue files relative to that file or always start from ./assets/img? For example if my structure is like this:

  assets
    img
      bg.jpg
  components
    pages
      login.vue

So when referencing bg.jpg inside a CSS in login.vue should I reference it like:

background-image: url('./assets/img/bg.jpg')

or

background-image: url('../../assets/img/bg.jpg')

Thanks for helping.

[yyx990803]

The latter - always relative to the file you are editing.

[chengqiang1992]

我也遇到类似的问题。 当CSS 背景图片URL是写在相应div的class里 如background-image: url('../assets/images/1.png')，该背景图片会显示，但是如果该URL写在对应div的style属性内，该图片不会显示。不知道我的配置文件要做什么样的修改

[mervynyang]

请问 放在template中的图片路径应该怎么设置呢？

[Odin04ka]

just do next background: url(~assets/img/m/bg-header.jpg);

[wk1507341428]

放在template中的图片，打包出来以后，会发现路径错误~ 应该和webpack打包有关系，vue-cli 2.0 有地方可以修改配置，但是vue-cli 3.0 怎么修改呢？

[WormGirl]

其实在style里使用的图片一般都是静态资源，为何不直接放到static文件夹里而要放到assets里呢，放到static里就没这个问题了(./static/image.png)

[TheRod1990]

Tried that as well but does not make any difference... Here's how I am trying to do it with my app.vue

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data () {
    return {
      shared_state: window.shared_state
    }
  }
}
</script>

<style lang="stylus">
body
  direction: ltr;
  background: url('./assets/img/bg1.jpg')

#app
    height: 100%;
</style>

This works perfect, thanks

[luckymore]

vue-cli3中，这样修改好麻烦啊，，还有别的办法没？

chainWebpack: config => {
    config.module
      .rule('images')
      .use('url-loader')
      .tap(options => {
        return merge(options, {
          publicPath: '//id.jd.com/www/3c-medal/babel/',
          limit: 3000
        })
      })
    config.module
      .rule('svg')
      .use('file-loader')
      .tap(options => ((options.publicPath = '//id.jd.com/www/3c-medal/babel/'), options))
}

[saloev]

i do something like this:

$assets: '~@/assets/';

html {
  background: url( $assets + '/path.jpeg') no-repeat center center fixed; 
}

[mk12]

@saloev, I think it looks even better like this:

@function asset($path) {
  @return url("~@/assets/#{$path}");
}

html {
  background: asset('path.jpeg') no-repeat center center fixed; 
}

Following this tutorial, I was able to put this function and other variables in an implicitly loaded file variables.scss:

// vue.config.js
css: {
  loaderOptions: {
    sass: {
      data: "@import '@/assets/variables.scss';"
    }
  }
}

[SeanRParker]

In case anybody came looking to add an image to a css content element like I was:

content: url(~@/assets/path/to-image.png);

Thanks @saloev and @mk12! I looked everywhere for this.

[oivinds]

@yyx990803 Is there a reason why @SeanRParker solution is not documented? Or maybe I have missed it?

[NullYing]

background: url("~@assets/login_bg.jpg")

I use ~@assets and it's show

To install it, you can run: npm install --save @assets/login_bg.jpg

[fangbinwei]

@oivinds the doc of css-loader explains some about ~ in url

@NullYing If you confirm it's bug of CLI, you can open a new issue and provide a reproducible repo