Webpack doesn't load inline background-image

Question

This is the rule for the image loader

      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      },

This is the rule for the html loader

test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: {
              minimize: true
            }
          }

every other images are loaded fine, except for the inline background images

<div class="ms__slide" style="background-image: url('../images/slider-bg.jpg')">

      </div>

How do you use your template? Looks like you have to use this loader as well https://webpack.js.org/loaders/html-loader/ — tmhao2005, Sep 03 '20 at 10:05
i use this loader too, everything works perfectly, i just need the inline background images to get loaded aswell — Vadim Surugiu, Sep 03 '20 at 10:06
This option https://webpack.js.org/loaders/html-loader/#attributes allows you to require your image gets extracted in the build. It's supposed to be working. Can you share more about your code? — tmhao2005, Sep 03 '20 at 10:09
Why don't you edit your question? I'm also keen to know where you import your html? — tmhao2005, Sep 03 '20 at 10:16
no you didn't understand, what do you mean by "where do i import my html"? — Vadim Surugiu, Sep 03 '20 at 10:50
I meant you can you include above html into the bundle? Is that located in index.html or a template of component? — tmhao2005, Sep 03 '20 at 10:52
Check this similar question https://stackoverflow.com/questions/59062150/html-loader-file-loader-not-bundling-the-correct-image-source — tmhao2005, Sep 03 '20 at 11:56
that question isn't similar at all, he has problems with a regular img tag, I have problems with inline background-image — Vadim Surugiu, Sep 03 '20 at 12:16
Have you set up a repo yet? If so, is it accessible? So I can have a look then — tmhao2005, Sep 03 '20 at 15:37
Or you can just simply create a reproducible repo with minimal of code which ends up with the issue then I can help with — tmhao2005, Sep 04 '20 at 07:46

score 0 · Answer 1 · answered Sep 03 '20 at 10:53

0

Add also a css loader:

npm install --save-dev css-loader

Somewhere in rule section:

{
    test: /\.css$/,
    loader: 'css-loader' 
}

answered Sep 03 '20 at 10:53

tom

9,550
6
30
49

i have all the loaders i need, the problem is only with the background-image – Vadim Surugiu Sep 03 '20 at 11:18
it works only when the url() is in css, it doesn't work with the inline css – Vadim Surugiu Sep 03 '20 at 11:32

Webpack doesn't load inline background-image

1 Answers1