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!
SamO
May 26, 2023, 7:59pm
2
Hiya, welcome to the forums! thanks for reaching out.
Kindly check this response and see if you have a similar problem:
Some of your image references are pointing at GitHub not Netlify.
For example with the sea image itβs trying to load it from https://quynh-vo-le.github.io/images/site/sea.jpg
[screenshot-20220607-160909]
Iβm not familiar with the system youβre using, but at the top of your config.yaml I can see thereβs a baseURL property that is currently set to that GitHub site.
[screenshot-20220607-161208]
Itβs likely you just need to change that.
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
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