Webpack: Relative static assets in CSS folder

[rjoo]

Just opening a new issue confirming that bug #208 still exists and @githoniel's solution is still necessary today.

This has all to do with using relative paths in CSS files.

<style> .element { background-image: url('~./assets/img/bg.png'); // works in dev // in production, browser will try to retrieve /static/css/assets/img/bg.png } </style>

[LinusBorg]

Just commenting to let you know that I intend to look into this, but it wil require to make thorough tests of various scenarios, especially nested routes in vue-router, so see if that fix actually works across all of them.

So please be patient, It's not forgotten, but not done with a simple change, at least not if we want the template to be thoroughly tested.

[LinusBorg]

So I tried to reproduce it, but still can't,

[sikanderv]

Hello, I've a similar issue but in DEV.

When I run 'npm run dev', I get no errors related to the image URL path. The image simply does NOT display in the background.

After going through the issues related to this problem in detail, I tried all possible paths in hopes of getting it right:

../../assets/logo.png,
../assets/logo.png,
./assets/logo.png,
/assets/logo.png,
assets/logo.png, and even
logo.png

but no luck. I did modify the 'webpack.base.conf.js' file to include the below line, as suggested by @githoniel in #208

publicPath: env === 'production' ? '../../' : './'

Not sure if this matters, but in the same file, I have for the vue-loader:

        options: {
          vueLoaderConfig,
           loaders: {
               'scss': 'vue-style-loader!css-loader!sass-loader',
               'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
           }
         }

Image path
src\assets\logo.png

AppShell.vue
src\components\AppShell.vue

CODE

template

      <div id="logo" :style="{ 'backgroundImage': 'url(\'' + image + '\')' }">
        <h1> IMAGE SHOULD APPEAR HERE </h1>
      </div>

script

  data () {
    return {
      msg: 'My Driving School',
      tabIndex: 0,
      image: '../../assets/logo.png'
    }
  }

CSS

#logo {
  background-position: center;
  background-repeat: no-repeat;
}

The repo is hosted at https://github.com/sikanderv/vue-projects/tree/master/driving-school if someone would like to take a look at it.

Screenshot of the page and Dev Tools:

[LinusBorg]

your problem is not a problem related to paths.

You are dynamically constructing CSS styles at runtime. Webpack can't recognize that at build time without some help. That help is require().

data () {
    return {
      msg: 'My Driving School',
      tabIndex: 0,
      image: require('../../assets/logo.png')
    }
  }

[sikanderv]

Thank you very much, this works. Guess I have some reading to do about Webpack. :)

[pabloimrik17]

How should i use that same in vue with Typescript?
`image: require('../../assets/logo.png')

I have this error:

[rogerclarkmelbourne]

I'm trying to deploy into a sub folder on the production server, and using

module.exports = {
  publicPath: '/webapp/'
}

in vue.config.js

works fine for the javascript files, however the background image urls in the styles don't work

e.g.

background: url(/assets/images/unit_tab_indicator_ss.png);

does not become

background: url(/webapp/assets/images/unit_tab_indicator_ss.png);

I've tried removing the absolute path / from the front of the url and also tried using ./ but nether of these will compile into a valid Vue.js application,

I've also tried setting the assets path in the config e.g.

https://cli.vuejs.org/config/#assetsdir

setting it to './' or '/assets' but this doesn't work either, as normally the build fails

Is there a workaround for this problem ?

[kokars]

I'm trying to deploy into a sub folder on the production server, and using

module.exports = {
  publicPath: '/webapp/'
}

in vue.config.js

works fine for the javascript files, however the background image urls in the styles don't work

e.g.

background: url(/assets/images/unit_tab_indicator_ss.png);

does not become

background: url(/webapp/assets/images/unit_tab_indicator_ss.png);

I've tried removing the absolute path / from the front of the url and also tried using ./ but nether of these will compile into a valid Vue.js application,

I've also tried setting the assets path in the config e.g.

https://cli.vuejs.org/config/#assetsdir

setting it to './' or '/assets' but this doesn't work either, as normally the build fails

Is there a workaround for this problem ?

Try this https://github.com/vuejs/vue-loader/issues/646#issuecomment-454959580