React Build Images don't show

[D-Learning76]

So, I have several images on my react App, but, after run the "npm run build" to create an optimization build, the images doesn't appear. Why?

[bineetNaidu]

Would you add more info about the issue

[Hrishi1999]

AFAIK, there is a known issue with react-scripts. Try using an older version like 3.4.4

[jurajpiar]

@Hrishi1999 Could you give us the link to the issue you mention?

Also downgrading isn't really a good solution as CRAv3.4.4 contains some vulnerabilities for which we want to upgrade to v4.

The issue seems to be rooted somewhere in the way CRA4 packages the images, or the way it references them.
The following figure shows resulted DOM with an SVG added using ES6 import:

As you can see the img tag's src prop is set to [object Module] instead of the actual path that you'd expect there.

I suspect this is not an issue if the images are in the local repo (hence it has not been captured in the tests I'm guessing). The reason for this conjecture is that when I import an image from a library (another repo) and point to the file within the src folder it works fine. However if referencing the dist folder (ie the compiled location), it inserts the object into the src prop as seen in the figure.

This wouldn't be that big of a problem if not for the fact that some of the components we use from the given library also contain images and these are broken too, but cannot be "fixed" the same way.

[Hrishi1999]

@jurajpiar This issue: #9992

[Prashant-Kesharwani]

So, I have several images on my react App, but, after run the "npm run build" to create an optimization build, the images doesn't appear. Why?

use ".default" after require inside img src, it will fix the issue.
Example:

Earlier => src={require(../../assests/images/${degree.logo_path})}
Later => src={require(../../assests/images/${degree.logo_path}).default}