Image not displaying, though is in build files. React

Support
,
1

Hello,

I am struggling a bit with an strange error, where one of my images (nysl) for my projects section is not loading. Testing on my local dev server I have no issues, only on netlify is it not loading.

My website link is https://mjb.netlify.com/

Adding a console.error I got the following output:

react_devtools_backend.js:6 Project → error Error: Cannot find module ‘./nysl.png’
at o (.$:19)
at r (.$:14)
at E (Project.js:26)
at ca (react-dom.production.min.js:154)
at So (react-dom.production.min.js:259)
at hu (react-dom.production.min.js:230)
at pu (react-dom.production.min.js:229)
at iu (react-dom.production.min.js:223)
at react-dom.production.min.js:121
at t.unstable_runWithPriority (scheduler.production.min.js:18)

In my code I am loading the images dynamically using context:

    const images = require.context("../../resources/images/portfolio", true);
       let img = "";
       try {
          img = images("./" + imgSrc);
       } catch (error) {
          console.error("Project -> error", error);
	}

imgSrc is being supplied by the JSON, which is working for all the other images.

I have tried, changing the images itself. Double checking the JSON naming and filepaths. I have downloaded the website from netlify and I find the nysl image in the build, so it appears to be building correctly.

Honestly not sure where to go from here or where the error lies. Would really appreciate any support.

Kindest Regards,

Matthew

2

hi there,

I am not seeing a console error for your site, myself.

image
image2308×1316 329 KB

were you able to fix the issue?

3

Hello, thank you for responding.
Unfortunately, the image still isn’t loading. (NYSL Website)

Not sure why error is not displaying for you, possible its only showing through react devtools? Please see screenshot below:

image
image772×243 13 KB

4

and just to confirm, you are not seeing the image in the website? (i didn’t see anything that looked like a broken image when i pulled up your site).

Usually if a path works locally or for some reasons but not for others it is either a case issue (our system may handle case differently than our local machine or something that is potentially causing problems in the .gitignore (if you have one). Can you double check on these two things please?

5

.gitignore:

# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*

The missing image is for NYSL, viewable after the load more is clicked.

image
image417×872 63.8 KB

File path and naming is the same as the other images. All lowercase and filetype matches.

6

hi, i see it now. In my inspector i see this, also:

image
image934×588 29.6 KB

that’s odd here is that it doesn’t even write the path into the code, so, regardless of whether the image were there or not, it still wouldn’t load.

I’m grasping at straws a little bit, here, but for sanity’s sake try renaming the image. I have oddly had that fix things before.

7

Okay, so the renaming worked. However, no idea why it wasn’t working with the previous name.

Often the best solution is the simplest, thanks.

1 Like
8

glad we got there in the end!