Urls to image files not found

netlify site: https://luminous-pithivier-c6870e.netlify.app
repo: GitHub - Benkaz3/gi-character-picker

problem: all .png files are not found on your server

https://luminous-pithivier-c6870e.netlify.app/images/chars/Keqing.png
This applied to all .png files in the same folder /images/chars

The files are there on the repo. Works fine locally.

Really appreciate the help! :slight_smile:

Hiya, welcome to the forums! thanks for reaching out.

Kindly check this response and see if you have a similar problem:

Thanks for the quick response. I can’t seem to find a solution looking through the topic you shared.

Since all images in this folder have the same issue. I looked into this 404 support page but still couldn’t figure out what went wrong.

Pasting my deploy log here for your reference.

4:33:03 PM: Build ready to start
4:33:06 PM: build-image version: 4b067841aaa59ef71931d3505b98c2bc3e63f36f (focal)
4:33:06 PM: buildbot version: a97756545adbd82de83b06c902122c919d70e7f2
4:33:06 PM: Fetching cached dependencies
4:33:06 PM: Failed to fetch cache, continuing with build
4:33:06 PM: Starting to prepare the repo for build
4:33:07 PM: No cached dependencies found. Cloning fresh repo
4:33:07 PM: git clone --filter=blob:none GitHub - Benkaz3/gi-character-picker
4:33:07 PM: Preparing Git Reference refs/heads/main
4:33:10 PM: Starting to install dependencies
4:33:10 PM: Python version set to 3.8
4:33:10 PM: Attempting Ruby version 2.7.2, read from environment
4:33:10 PM: Using Ruby version 2.7.2
4:33:11 PM: Started restoring cached go cache
4:33:11 PM: Finished restoring cached go cache
4:33:12 PM: go version go1.19.9 linux/amd64
4:33:12 PM: Using PHP version 8.0
4:33:13 PM: v16.20.0 is already installed.
4:33:13 PM: Now using node v16.20.0 (npm v8.19.4)
4:33:13 PM: Enabling Node.js Corepack
4:33:14 PM: Started restoring cached build plugins
4:33:14 PM: Finished restoring cached build plugins
4:33:14 PM: Started restoring cached corepack dependencies
4:33:14 PM: Finished restoring cached corepack dependencies
4:33:14 PM: No npm workspaces detected
4:33:14 PM: Started restoring cached node modules
4:33:14 PM: Finished restoring cached node modules
4:33:14 PM: Installing npm packages using npm version 8.19.4
4:33:15 PM: added 8 packages, and audited 9 packages in 1s
4:33:15 PM: 2 packages are looking for funding
4:33:15 PM: run npm fund for details
4:33:15 PM: found 0 vulnerabilities
4:33:15 PM: npm packages installed
4:33:15 PM: Install dependencies script success
4:33:15 PM: Starting build script
4:33:16 PM: Detected 1 framework(s)
4:33:16 PM: β€œvite” at version β€œ4.3.8”
4:33:16 PM: Section completed: initializing
4:33:17 PM: ​
4:33:17 PM: Netlify Build
4:33:17 PM: ────────────────────────────────────────────────────────────────
4:33:17 PM: ​
4:33:17 PM: ❯ Version
4:33:17 PM: @netlify/build 29.11.6
4:33:17 PM: ​
4:33:17 PM: ❯ Flags
4:33:17 PM: baseRelDir: true
4:33:17 PM: buildId: 64707ccf12128c6c4baa0af5
4:33:17 PM: deployId: 64707ccf12128c6c4baa0af7
4:33:17 PM: ​
4:33:17 PM: ❯ Current directory
4:33:17 PM: /opt/build/repo
4:33:17 PM: ​
4:33:17 PM: ❯ Config file
4:33:17 PM: No config file was defined: using default values.
4:33:18 PM: Starting post processing
4:33:17 PM: ​
4:33:17 PM: ❯ Context
4:33:17 PM: production
4:33:17 PM: ​
4:33:18 PM: Skipping HTML post processing
4:33:17 PM: Build command from Netlify app
4:33:17 PM: ────────────────────────────────────────────────────────────────
4:33:17 PM: ​
4:33:18 PM: Post processing - header rules
4:33:18 PM: $ npm run build
4:33:18 PM: > build
4:33:18 PM: > vite build
4:33:18 PM: vite v4.3.8 building for production…
4:33:19 PM: Post processing - redirect rules
4:33:18 PM: transforming…
4:33:18 PM: βœ“ 5 modules transformed.
4:33:18 PM: rendering chunks…
4:33:19 PM: Post processing done
4:33:18 PM: computing gzip size…
4:33:18 PM: dist/index.html 1.94 kB β”‚ gzip: 0.77 kB
4:33:18 PM: dist/assets/index-80896e2a.css 2.77 kB β”‚ gzip: 0.96 kB
4:33:19 PM: Section completed: postprocessing
4:33:18 PM: dist/assets/index-c7662108.js 4.62 kB β”‚ gzip: 1.27 kB
4:33:18 PM: βœ“ built in 104ms
4:33:18 PM: ​
4:33:18 PM: (build.command completed in 523ms)
4:33:18 PM: ​
4:33:18 PM: Deploy site
4:33:18 PM: ────────────────────────────────────────────────────────────────
4:33:18 PM: ​
4:33:18 PM: Starting to deploy site from β€˜dist’
4:33:18 PM: Calculating files to upload
4:33:18 PM: 0 new files to upload
4:33:18 PM: 0 new functions to upload
4:33:18 PM: Section completed: deploying
4:33:18 PM: Site deploy was successfully initiated
4:33:18 PM: ​
4:33:19 PM: Site is live :sparkles:
4:33:18 PM: (Deploy site completed in 76ms)
4:33:18 PM: ​
4:33:18 PM: Netlify Build Complete
4:33:18 PM: ────────────────────────────────────────────────────────────────
4:33:18 PM: ​
4:33:18 PM: (Netlify Build completed in 624ms)
4:33:19 PM: Caching artifacts
4:33:19 PM: Started saving node modules
4:33:19 PM: Finished saving node modules
4:33:19 PM: Started saving build plugins
4:33:19 PM: Finished saving build plugins
4:33:19 PM: Started saving corepack cache
4:33:19 PM: Finished saving corepack cache
4:33:19 PM: Started saving pip cache
4:33:19 PM: Finished saving pip cache
4:33:19 PM: Started saving emacs cask dependencies
4:33:19 PM: Finished saving emacs cask dependencies
4:33:19 PM: Started saving maven dependencies
4:33:19 PM: Finished saving maven dependencies
4:33:19 PM: Started saving boot dependencies
4:33:19 PM: Finished saving boot dependencies
4:33:19 PM: Started saving rust rustup cache
4:33:19 PM: Finished saving rust rustup cache
4:33:19 PM: Started saving go dependencies
4:33:19 PM: Finished saving go dependencies
4:33:20 PM: Build script success
4:33:20 PM: Section completed: building
4:33:20 PM: Uploading Cache of size 66.2MB
4:33:21 PM: Section completed: cleanup
4:33:21 PM: Finished processing build request in 14.266s

@Benkaz3 You’re using Vite, so you should read their Static Asset Handling Documentation.

Your issue is that you seemingly believe that Vite processes the folder structure you have and deploys it β€œas is”, but it doesn’t work like that.

It produces a dist folder and then you’re deploying that.

If you run your npm run build locally you will see that your entire images folder never makes it into the dist folder.

As per the Vite documentation, you should use the Public Directory for this.

E.g. Move your /images/ folder to /public/images/ in your repository, so that the Vite build moves it to /dist/images/ and it ends up as /images/ when deployed.

1 Like