Images not showing when deployed but working fine in local

[theowalcot6]

I have two problems:
1.

• My images aren’t showing on any projects sites e.g. /projects/gan-nift
• These images are available in the Github folder and the src is correct (/static/media URL shows the images in a separate tab)

Any reload on a link other than the home page returns a 404 response

Please help

chipper-moonbeam-4e4635](Netlify App

3:26:16 PM: build-image version: d55944c047ef0aee2ac01971edde72cb2a50acfe (focal)
3:26:16 PM: build-image tag: v4.16.1
3:26:16 PM: buildbot version: 0be68edd034c744ad79b207db44f42646b4e8ecb
3:26:16 PM: Fetching cached dependencies
3:26:16 PM: Starting to download cache of 133.1MB
3:26:17 PM: Finished downloading cache in 804.802488ms
3:26:17 PM: Starting to extract cache
3:26:18 PM: Finished extracting cache in 1.304905624s
3:26:18 PM: Finished fetching cache in 2.143152063s
3:26:18 PM: Starting to prepare the repo for build
3:26:18 PM: Preparing Git Reference refs/heads/main
3:26:19 PM: Parsing package.json dependencies
3:26:20 PM: Starting build script
3:26:20 PM: Installing dependencies
3:26:20 PM: Python version set to 2.7
3:26:21 PM: Started restoring cached node version
3:26:21 PM: Finished restoring cached node version
3:26:22 PM: v16.19.0 is already installed.
3:26:22 PM: Now using node v16.19.0 (npm v8.19.3)
3:26:22 PM: Enabling node corepack
3:26:22 PM: Started restoring cached build plugins
3:26:22 PM: Finished restoring cached build plugins
3:26:22 PM: Attempting ruby version 2.7.2, read from environment
3:26:23 PM: Using ruby version 2.7.2
3:26:23 PM: Using PHP version 8.0
3:26:23 PM: No npm workspaces detected
3:26:23 PM: Started restoring cached node modules
3:26:23 PM: Finished restoring cached node modules
3:26:23 PM: Started restoring cached go cache
3:26:23 PM: Finished restoring cached go cache
3:26:24 PM: go version go1.19.4 linux/amd64
3:26:24 PM: Detected 1 framework(s)
3:26:25 PM: “create-react-app” at version “5.0.1”
3:26:25 PM: Installing missing commands
3:26:25 PM: Verify run directory
3:26:25 PM: Section completed: initializing
3:26:26 PM: ​
3:26:26 PM: Netlify Build
3:26:26 PM: ────────────────────────────────────────────────────────────────
3:26:26 PM: ​
3:26:26 PM: ❯ Version
3:26:26 PM: @netlify/build 29.2.1
3:26:26 PM: ​
3:26:26 PM: ❯ Flags
3:26:26 PM: baseRelDir: true
3:26:26 PM: buildId: 63adb19668ed940009932482
3:26:26 PM: deployId: 63adb19668ed940009932484
3:26:26 PM: ​
3:26:26 PM: ❯ Current directory
3:26:26 PM: /opt/build/repo
3:26:26 PM: ​
3:26:26 PM: ❯ Config file
3:26:26 PM: No config file was defined: using default values.
3:26:26 PM: ​
3:26:26 PM: ❯ Context
3:26:26 PM: production
3:26:26 PM: ​
3:26:26 PM: 1. Build command from Netlify app
3:26:26 PM: ────────────────────────────────────────────────────────────────
3:26:26 PM: ​
3:26:26 PM: $ npm run build
3:26:26 PM: > personal-site@0.1.0 build
3:26:26 PM: > react-scripts build
3:26:27 PM: Creating an optimized production build…
3:26:32 PM: Compiled successfully.
3:26:32 PM:
3:26:32 PM: File sizes after gzip:
3:26:32 PM: 74.37 kB build/static/js/main.c9b120ad.js
3:26:32 PM: 5.67 kB build/static/css/main.82c16401.css
3:26:32 PM: 1.78 kB build/static/js/787.3ba5e41c.chunk.js
3:26:32 PM: The project was built assuming it is hosted at ./.
3:26:32 PM: You can control this with the homepage field in your package.json.
3:26:32 PM: The build folder is ready to be deployed.
3:26:32 PM: Find out more about deployment here:
3:26:32 PM: Deployment | Create React App
3:26:32 PM: ​
3:26:32 PM: (build.command completed in 6.5s)
3:26:32 PM: ​
3:26:32 PM: 2. Deploy site
3:26:32 PM: ────────────────────────────────────────────────────────────────
3:26:32 PM: ​
3:26:32 PM: Starting to deploy site from ‘build’
3:26:32 PM: Creating deploy tree
3:26:33 PM: 4 new files to upload
3:26:33 PM: 0 new functions to upload
3:26:33 PM: Section completed: deploying
3:26:33 PM: Site deploy was successfully initiated
3:26:33 PM: ​
3:26:33 PM: (Deploy site completed in 225ms)
3:26:33 PM: Starting post processing
3:26:33 PM: ​
3:26:33 PM: Netlify Build Complete
3:26:33 PM: ────────────────────────────────────────────────────────────────
3:26:33 PM: Post processing - HTML
3:26:33 PM: ​
3:26:33 PM: (Netlify Build completed in 6.7s)
3:26:33 PM: Caching artifacts
3:26:33 PM: Started saving node modules
3:26:33 PM: Finished saving node modules
3:26:34 PM: Post processing - header rules
3:26:33 PM: Started saving build plugins
3:26:33 PM: Finished saving build plugins
3:26:33 PM: Started saving pip cache
3:26:34 PM: Post processing - redirect rules
3:26:33 PM: Finished saving pip cache
3:26:34 PM: Post processing done
3:26:33 PM: Started saving emacs cask dependencies
3:26:33 PM: Finished saving emacs cask dependencies
3:26:33 PM: Started saving maven dependencies
3:26:34 PM: Section completed: postprocessing
3:26:33 PM: Finished saving maven dependencies
3:26:33 PM: Started saving boot dependencies
3:26:33 PM: Finished saving boot dependencies
3:26:33 PM: Started saving rust rustup cache
3:26:33 PM: Finished saving rust rustup cache
3:26:33 PM: Started saving go dependencies
3:26:33 PM: Finished saving go dependencies
3:26:33 PM: Build script success
3:26:33 PM: Section completed: building
3:26:34 PM: Uploading Cache of size 133.1MB
3:26:35 PM: Section completed: cleanup
3:26:35 PM: Finished processing build request in 19.199363807s
3:26:37 PM: Site is live

[hrishikesh]

Try removing the . from the src:

Instead of ./static, make it /static.

[theowalcot6]

Hey @hrishikesh - I can’t remove the . from src as that’s a product of how it’s deployed into static/media. My original code just refers to the file structure in my Github repo e.g. src=‘./Kaggle_logo.png’. If I remove the . from that src then it fails to build. Additionally, I have other images across the site which follow the same structure and work fine so I’m a bit confused by the issue/solution

Also, do you have any advice on the second issue mentioned: ‘Any reload on a link other than the home page returns a 404 response’

[hrishikesh]

@theowalcot6

If I remove the . from that src then it fails to build.

That sounds like a weird build process to me. But, that’s the only solution here. You’re referencing the files incorrectly. ./static/ refers to relative path from the current folder, so if you go to domain.tld/folder1/, the files are now being referred from domain.com/folder1/static... while the files exist at domain.com/static.... You need to accommodate your build process to handle this correctly.

@theowalcot6

Any reload on a link other than the home page returns a 404 response’

It’s documented here:

Deployment | Create React App

[theowalcot6]

Hey - I think maybe you misunderstood what I said - I’m saying that the solution doesn’t work no matter what, as Netlify adds the . to the src during deployment - there’s nothing I can do to change it.

1. https://create-react-app.dev/docs/adding-images-fonts-and-files/ this is how the React documentation explains how to add an image
2. My code does so in the exact same way
   
   
3. It’s only when it’s deployed through Netlify that the src is changed to the static/media folder - i.e. I have no control over whether or not the . is added

Additionally, if you go to the /play part of the site, there’s multiple images on that page that have been added in the exact same way. They work but the above doesn’t

[hrishikesh]

@theowalcot6

there’s nothing I can do to change it.

Maybe you have . in homepage in your package.json.

[Karan1]

Reason for “Not Found” is because, when using router eg: React
Router it handles all the routes but when you directly goto an
endpoint, netlify must know where to redirect you. That is what we
are specifying in the _redirects file

If you see “Not Found” error while directly browsing to a specific path, For eg: https://yourdomain.com/something , this might be helpfull (ReactJS):

In your public folder (folder which contains index.html) create a
file called _redirects with no extension. Then, type the following
inside it:

/* /index.html 200

Now save, commit, push and publish.

[SamO]

Thanks for sharing that tip @Karan1