Webpack alias with <img> src and file-loader not copying image

Question

I have an issue where file-loader isn't copying images that are using a resolve.alias in the image src.

An example:

<img src="assets/images/image.jpg"/>

The resolve.alias is:

alias: {
  'assets': path.resolve(__dirname, 'client/assets'),
}

And the file-loader is:

{ test: /\.(jpe?g|gif|png|svg)$/, loader: 'file-loader?name=assets/images/[name].[ext]' }

This is in a React/Redux app. I know I can use require but some images use a variable, and if that variable equals a value that has no image, the full app will crash due to failure to load a module.

Anyone any ideas?

Thanks.

Answer 1

You should import your image file instead of hardcoding the path of it:

import myImage from './assets/images/image.jpg';

...

<img src={myImage} />

Answer 2

please try this one, it works for me.

<img src="${require(`assets/images/image.jpg`)}"/>