problem with background url

[jonathandion]

Hi,

I'm having a problem when loading a image with url(). I would like to have background: url(../build/images/brew.jpg); but in app.css I have background: url(/images/bg.jpg);

I tried the 'root' attribute from the doc but it's doesn't work...

What I'm doing wrong ? 😢

base.scss :
background: url('../images/bg.jpg');

app.css
background: url(/images/bg.jpg);

There is my src folder :

├── src
|   ├── stylesheets
|   |    └──  base..scss
|   ├── images
|   |    └── bg.png
|   └── javascripts
|        └── index.js
.

There is my build folder :

├── src
|   ├── images
|   |    └── bg.png
|    - app.js
|    - app.css

my webpack config

const autoprefixer = require('autoprefixer')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const path = require('path')

 const sassLoaders = [
  'css-loader',
  'postcss-loader',
  'sass-loader?includePaths[]=' + path.resolve(__dirname, './src')
]

const config = {
  entry: {
    app: ['./src/index']
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: ['babel-loader']
      },
      {
        test: /\.scss$/,
     loader: ExtractTextPlugin.extract('style-loader', sassLoaders.join('!'))
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loaders: [
            'file?hash=sha512&digest=hex&name=images/[name].[ext]',
            'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
        ]
      }
    ]
  },
  output: {
    filename: '[name].js',
    path: path.join(__dirname, './build/'),
    publicPath: '/'
  },
  plugins: [
    new ExtractTextPlugin('[name].css')
  ],
  postcss: [
    autoprefixer({
      browsers: ['last 2 versions']
    })
  ],
  resolve: {
    extensions: ['', '.js', '.scss'],
    modulesDirectories: ['src', 'node_modules']
  }
}

module.exports = config

Thanks !

[psimyn]

I think one of the following should work:

background: url('src/images/bg.jpg');

background: url('images/bg.jpg');

(this one may need webpack resolve.root set to 'src')

I will doublecheck a bit later

[kevinSuttle]

Same issue here. Tried for hours to tweak config settings, and nothing worked. This seems to be happening quite a bit with this loader. The system should be more forgiving.

[satish-pokala]

+1

[fera2k]

Same here... it seems the browser doesn't even request the url

[nthonymiller]

👍 Same here - issue is that the url doesn't work when using an external image, but does work when the image is inlined base64 encoded.

[kumarharsh]

@psimyn I tried the solutions you've given, but nothing works. Interestingly, prefixing the url with http://localhost does load the image. So I think browsers are not loading any image in the URL when it starts with /

[x4080]

Is there any solution yet?

[psimyn]

@kumarharsh have you set publicPath in webpack config? I've used leading slash when setting publicPath and it works ok

[kumarharsh]

@psimyn yes, I'm using publicPath as /. but no luck yet. What is your final URL (in the url() property in CSS) being output as?

[mhfowler]

I am having the same issue. Have tried different publicPath and setting root for css-loader with no luck. It works when sourceMap is disabled. But doesn't work when sourceMap is not disabled.

here is my webpack config, any help is appreciated: https://github.com/mhfowler/Webpack-Example/blob/master/webpack.config.babel.js

[silen-z]

Same problem here. Tried to use background: url(/background.png) and @font-face: src(/something.woff) with css-loader and file-loader. Only browser that works with this is IE11. I eventually switched to using url-loader for these files. I only tried serving this with webpack-dev-server

[kumarharsh]

Hey, it was I found similar problems here:
http://stackoverflow.com/questions/37288886/webpack-background-images-not-loading

Ref1: #232
Ref2: webpack-contrib/style-loader#55

In my case, it did get fixed when I removed ?sourceMap from css-loader

[ndcunningham]

You can also try using
~ before you path to the image

Notably: background-url: (~assets/image/myimage) should resolve the path

[onepixelcitizen]

Add ?url=false to your css-loader, that will disable url handling :

e.g: ['css-loader?url=false', 'sass-loader'] ...

[JacobWay]

If you try to use ~ before your path to the image. Like this: background-url: (~assets/image/myimage). You should config resolve property in your webpack like this:

resolve: {
  alias: {
    'assets': resolve('your/path/to/assets')
  }
}

[Harti]

@JacobWay could you please specify where exactly said line has to go? The only place where I find the token resolve in my webpack.config.js is for exported modules, i.e. it'll start looking in node_modules.

[kumarharsh]

@Harti resolve is a first-level key on the webpack.config object.

wepack.config = {
  resolve: {
    ...
  }
}

[dev-johnny-gh]

@onepixelcitizen awesome man, you save my life.

[YutHelloWorld]

@onepixelcitizen it works!

[volkanunsal]

This started happening again today.

[volkanunsal]

In my case, the background image is inserted as an [object Object]. Is it the same issue?

[alexander-akait]

@volkanunsal downgrade file-loader (1.0.0 is still beta)

[volkanunsal]

@evilebottnawi Thank you!

[oyeanuj]

@evilebottnawi @d3viant0ne Is there a recommended solution for this problem given that the thread has many different possible solutions? What is the recommended way of using local images as background image urls?

[egeersoz]

I don't think this should have been closed. There is lots of confusion around the issue still, and no official recommended way to resolve it.

[lndj]

Solution: vuejs/vue-loader#481

[talss89]

@egeersoz I agree. @lndj - thanks for the link, it worked for me. For anyone put off by an unfamiliar character set:

if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        publicPath: '../../',         // The magic smoke
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

[alexander-akait]

Closing due to inactivity. Also we have many difference problem here, please create new issue if you have problem (with minimum reproducible test repo). Thanks!