Create-react-app: react-scripts v4.0.0 causes local images to not load

Created on 2 Nov 2020  路  13Comments  路  Source: facebook/create-react-app

Describe the bug

Upgrading from v3.4.4 to v4.0.0 (using npm install react-scripts@latest) causes my local images (using src={require("../../assets/images/logo/logo-v4.png")}) to not load, however external images load. (see StackOverflow post here ) Fixed by simply downgrading to v3.4.4.

Environment

Tested using MacOS Catalina v10.15.7 and Windows 10 on Chrome Version 86.0.4240.111

bug report needs triage

Most helpful comment

downgrade the version of react-scripts, thats works for me. I downgrade to 3.4.4 .

All 13 comments

In absolute terms, where are these images located? inside or outside the src folder?

Inside src folder

downgrade the version of react-scripts, thats works for me. I downgrade to 3.4.4 .

I recomend to downgrade react-scripts to 3.4.4 that bug does not happened anymore with that version, i hope that they fix that bug in the next patch

I have submitted a PR to fix this issue in #9934

try const logov4 = require("../../assets/images/logo/logo-v4.png").default or import logov4 from "../../assets/images/logo/logo-v4.png"

I don't know if this is the same issue but in 3.x this worked

+-public
|  +-images
|  |  +-abc.svg
|  +-index.html
+-src
  +-app.js
  +-app.css

Where app.js does import './app.css'; and app.css does foo { background url("/images/abc.svg"); }

Works in 3.x, fails in 4.0 with

./src/app.css
Error: Can't resolve '/images/abc.svg' in '/Users/gregg/temp/test/src'

@greggman how/have you fixed this?

For now I just reverted to 3.x I haven't had time to check if @n3tr 's patch is related or not

I have to use require('./to/img/a.png')?.default 馃槩

I can confirm this issue.
I tried to upgrade CRA 4.0.0 and images are not loaded.

+1 images are not loading after upgrading to react-scripts 4.0.0

same here, updated to react-scripts v4.0.0 and images are not loading anymore
all my img sources are in the src folder and I call them via src={require("./img/example.svg")}
React scripts v3.4.4 works fine

Was this page helpful?
0 / 5 - 0 ratings

Related issues

AlexeyRyashencev picture AlexeyRyashencev  路  3Comments

dualcnhq picture dualcnhq  路  3Comments

fson picture fson  路  3Comments

wereHamster picture wereHamster  路  3Comments

Aranir picture Aranir  路  3Comments