Dynamic image src used in React component with webpack not found

Question

I would like to reference a dynamic img src in my React component.

<img src={`/assets/provider-logos/${provider.providerId.toLowerCase()}.png`} alt={`${provider.providerId.toLowerCase()}-logo`} />

My current webpack-config has a file-loader rule like so:

  {
    test: /\.(png|gif|jpg|svg|ico)$/,
    // include: imgPath,
    // csp policy complains about using inline images - using individual files instead
    use: "file-loader?name=assets/[name]-[hash].[ext]",
  },

How do I reference the img dynamically if it has renamed by with a hash?

Answer 1

Can think of 2 options in this scenario.

1 Create a jsx file with all the images and export them as a module. E.g. // The below will be a file say _images.jsx

import file1 from 'path';
import file2 from 'path';
import abc from 'src/assests/abc.png';

export { file1, file2, abc };

Where file1 , file2 with be the image names you are expecting your provider to use.

2 Make sure your build outputs the images in a dist folder and you have specified the path to the files on the server.

<img src={SERVERPATH + `/assets/provider-logos/....

In this case you are specifying the actual image path of the file.