Require a image in CSS

[cwtuan]

I can require a image in JS easily like:

var img = document.createElement('img');
img.src = require('./glyph.png');

How can I require a image in CSS? I need something like:

.H1:before {
  content: url({require('./glyph.png)});
}

[nkbt]

just

content: url("./glyph.png");

You will need to use url-loader, webpack will do all the rest.

See https://github.com/nkbt/esnext-quickstart/blob/master/webpack.config.js#L19-L24 for example

[ankitduseja]

Thanks! This is probably the best how-to guide out there.

[sibelius]

@nkbt is this the same for a img src?

because this line: https://github.com/Lar21/webpack-starter-angular/blob/master/src/components/home/home.html#L7

is not working

[nkbt]

@sibelius webpack does not process html files and <img> sources won't work.
Id you use React, you do <img src={require('../../img.jpg')} />, if you use some templating language you will need to pass JS variable like:

const imgSrc = require('../../img.jpg');

// ....

// some kind of template
render(`
  <img src="%imgSrc%" />
`)

in angular you would use scope/this

$scope.imgSrc = require('../../img.jpg');

//....

// template.html
<img="imgSrc" />

And so on.

Just remember, that webpack simply returns string from require statement with files/images with correct path to automatically generated file, so you are then free to use it in any way your templating allows you.

[sibelius]

@nkbt thanks, this works great! \o/