Webpack alias with 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.

Webpack is a build step, so you cant use an `alias` and expect it to work with variables at runtime, sadly. — Tholle, Aug 09 '18 at 10:52
Thats a shame. I'll need to deal with horrible ../../ I think! — Darren Keen., Sep 10 '18 at 09:20

score 4 · Answer 1 · answered Aug 09 '18 at 10:53

4

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

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

...

<img src={myImage} />

answered Aug 09 '18 at 10:53

peetya

3,578
2
16
30

THese images can be dynamic though, so an import wouldn't work. I have tried a require but this crashes the app if the image doesn't exist (this could happen). Using a try catch doesnt work with a variable in the require either for some reason – Darren Keen. Sep 10 '18 at 09:19
You can try dynamic-import: https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import – peetya Sep 27 '18 at 09:08

score 1 · Answer 2 · answered Mar 05 '20 at 01:28

1

please try this one, it works for me.

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

answered Mar 05 '20 at 01:28

Yisen

21
1

Webpack alias with src and file-loader not copying image

2 Answers2