Webpack only loads images referenced by css. Does not load images referenced by js

Question

My dist folder contains my index.html, contact.html, index.js, contact.js, and two images that are mentioned by my css as background images.

ex.

background-image: url("../images/prairie.jpg");

That is everything in my dist folder. All other images(which my css does not mention) are not loaded. These images are only mentioned within .js files(ex. slideshow.js). This 'slideshow.js' file is a slideshow and it does not display any images, but shows the missing image icon. That background image mentioned earlier '../images/prairies.jpg' is shown. All the photos that are referenced by a css file are loaded into the dist folder. All photos mentioned only by a .js file and not a css file, are not loaded into the dist folder.

This is my webpack.config.js

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackTemplate = require('html-webpack-template');
const path = require('path');

const config = {
  mode: 'development',     // set mode option, 'development' or 'production'
  entry: {
    index: './src/index.js',
    contact:'./src/contact.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "[name].js",
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(gif|png|jpe?g|svg)$/i,
        use: [
          'file-loader',
          {
            loader: 'image-webpack-loader',
            options: {
              bypassOnDebug: true, // [email protected]
              disable: true, // [email protected] and newer
            },
          },
        ],
      }
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
      inject: true,
      chunks: ['index'],
      filename: './index.html'
    }),
  new HtmlWebpackPlugin({
    template: './contact.html',
    inject: true,
    chunks: ['contact'],
    filename: './contact.html'
})
  ]
};

module.exports = config;

I'm using relative paths and jsx, ex: <img className='map' src='images/map.png'></img> — Sam
– Sam, Commented Jul 26, 2019 at 10:00
Yes, that won't work. For js you need to require the images.. This info might help you -> medium.com/@godban/… — Keith
– Keith, Commented Jul 26, 2019 at 10:06
@Keith You're a genius. I essentially had to change all the strings for my image paths from something like 'images/map.png' to require('images/map.png'). One more thing, to avoid the names that are something like '39fjksjalef9.jpg', do you know how to include the original image name in the name of the jpg? For SEO purposes? — Sam
– Sam, Commented Jul 26, 2019 at 10:15
You can tell webpack what filename's to use. Maybe try this -> decembersoft.com/posts/… — Keith
– Keith, Commented Jul 26, 2019 at 10:19

Keith · Accepted Answer · 2019-07-26 10:39:35Z

When using webpack, when you also want to bundle images / assets. You can't access them using the normal url scheme,, eg. /images/my-image.png.

This is because your then telling your application to load the normal HTTP GET way, and not load via your bundle.

To access images from a bundle you do it like any other asset in webpack, you require it.. const image1 = require("images/image1.png") etc. Internally what webpack will be doing here is converting the binary image into a data uri. This means you can then do things like -> <img src={image1}/>

If you have lots of images you can use the require.context, but I personally avoid using this as I kind of like having more control of loaded assets.

To also handle funny files names, you can also let webpack produce sensible names with the hash appended instead. eg. In your loaders set the loader option to something like -> loader: 'file?name=[name].[ext]?[hash:5]'

UPDATE: Just thought if your using the file-loader plugin, ignore the bit about data uri, if using the file-loader webpack is doing a kind of remapping instead. If you don't use the file-loader, then it will do it using the data uri way.. But in both case's you use require..

Collectives™ on Stack Overflow

Webpack only loads images referenced by css. Does not load images referenced by js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related