You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@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.
Activity
bineetNaidu commentedon Jan 27, 2021
Would you add more info about the issue
Hrishi1999 commentedon Feb 6, 2021
AFAIK, there is a known issue with react-scripts. Try using an older version like 3.4.4
jurajpiar commentedon Mar 5, 2021
@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
imgtag'ssrcprop 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 commentedon Mar 5, 2021
@jurajpiar This issue: #9992
Prashant-Kesharwani commentedon Mar 29, 2021
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}