Webpack. Image loading failed

Question

Using webpack for the first time. Can't load images in there. Tried a LOT of things to fix it, but... I included my images in html through img src. I also did import in index.js:

    import backGround from '../img/bg.jpg';
    const bgImg = document.getElementById('bg');
    bgImg.src = backGround;

So I got this kind of error: ERROR in ./src/img/bg.jpg 1:0 Module parse failed: Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type

I can also show you my config:

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

score 0 · Accepted Answer · edited Jul 15 '21 at 08:34

0

Yow broh, you need to use url-loader File loader is for html files and stuff

 // "url" loader works like "file" loader except that it embeds assets
            // smaller than specified limit in bytes as data URLs to avoid requests.
            // A missing `test` is equivalent to a match.
            {
              test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
              loader: require.resolve('url-loader'),
              options: {
                limit: imageInlineSizeLimit,
                name: 'static/media/[name].[hash:8].[ext]',
              },
            },
…..
// More loaders
…..

            {
              loader: require.resolve("file-loader"),

              exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
              options: {
                name: "static/media/[name].[hash:8].[ext]",
              },
            },

Make sure to put file loader at the end

edited Jul 15 '21 at 08:34

Wai Ha Lee

8,598
83
57
92

answered Jul 14 '21 at 20:48

Ernesto

3,944
1
14
29

I got ReferenceError: imageInlineSizeLimit is not defined – Natalia Klimchuk Jul 14 '21 at 20:53
That’s for you to set it, it is a variable – Ernesto Jul 14 '21 at 20:54
You can delete it and put 1000 instead – Ernesto Jul 14 '21 at 20:55
WOW, no error...but I expected those images to appear in dist folder... is it possible? – Natalia Klimchuk Jul 14 '21 at 20:59
Oh, sorry still not working... I just forgot to uncomment the problematic code – Natalia Klimchuk Jul 14 '21 at 21:16
Then change where it says name – Ernesto Jul 14 '21 at 21:47
Change to what? – Natalia Klimchuk Jul 14 '21 at 21:59

Webpack. Image loading failed

1 Answers1