Some images missing after deploying

[marcobaass]

My sitename is: https://walkify.netlify.app/

Hello,

I have the issue that from my assets folder only one image got deployed to netlify, while all others are missing, even they are in the same folder, and have a smaller file size.

In the Deploy log it says for two images like this one:

2:22:35 PM: src/assets/imgs/walkman_blank_3_no_window.png referenced in src/assets/imgs/walkman_blank_3_no_window.png didn't resolve at build time, it will remain unchanged to be resolved at runtime

But other images are not even in the build log:

2:22:13 PM: build-image version: ecdc8b770f4a0193fd3f258c1bc6029e681813a4 (focal)
2:22:13 PM: buildbot version: 16ead92caa9f8e177f18ab47e138c7dc936e93d8
2:22:13 PM: Fetching cached dependencies
2:22:13 PM: Starting to download cache of 91.3MB
2:22:14 PM: Finished downloading cache in 1.213s
2:22:14 PM: Starting to extract cache
2:22:16 PM: Finished extracting cache in 1.515s
2:22:16 PM: Finished fetching cache in 2.796s
2:22:16 PM: Starting to prepare the repo for build
2:22:16 PM: Preparing Git Reference refs/heads/main
2:22:17 PM: Custom functions path detected. Proceeding with the specified path: 'netlify/functions'
2:22:18 PM: Starting to install dependencies
2:22:18 PM: Python version set to 3.8
2:22:19 PM: Attempting Ruby version 2.7.2, read from environment
2:22:20 PM: Using Ruby version 2.7.2
2:22:21 PM: Started restoring cached go cache
2:22:21 PM: Finished restoring cached go cache
2:22:22 PM: go version go1.19.13 linux/amd64
2:22:23 PM: Using PHP version 8.0
2:22:25 PM: Started restoring cached Node.js version
2:22:26 PM: Finished restoring cached Node.js version
2:22:26 PM: v18.20.4 is already installed.
2:22:27 PM: Now using node v18.20.4 (npm v10.7.0)
2:22:27 PM: Enabling Node.js Corepack
2:22:27 PM: Started restoring cached build plugins
2:22:27 PM: Finished restoring cached build plugins
2:22:27 PM: Started restoring cached corepack dependencies
2:22:27 PM: Finished restoring cached corepack dependencies
2:22:27 PM: npm workspaces detected
2:22:27 PM: Started restoring workspace root node modules
2:22:27 PM: Finished restoring workspace root node modules
2:22:27 PM: Installing npm packages using npm version 10.7.0
2:22:29 PM: up to date, audited 543 packages in 2s
2:22:29 PM: 152 packages are looking for funding
2:22:29 PM:   run `npm fund` for details
2:22:29 PM: 6 vulnerabilities (3 moderate, 3 high)
2:22:29 PM: To address all issues, run:
2:22:29 PM:   npm audit fix
2:22:29 PM: Run `npm audit` for details.
2:22:29 PM: npm packages installed
2:22:30 PM: Successfully installed dependencies
2:22:30 PM: Starting build script
2:22:31 PM: Detected 0 framework(s)
2:22:31 PM: Section completed: initializing
2:22:33 PM: ​
2:22:33 PM: Netlify Build                                                 
2:22:33 PM: ────────────────────────────────────────────────────────────────
2:22:33 PM: ​
2:22:33 PM: ❯ Version
2:22:33 PM:   @netlify/build 29.54.2
2:22:33 PM: ​
2:22:33 PM: ❯ Flags
2:22:33 PM:   accountId: 66e92b7393143ab6cf7dd2cc
2:22:33 PM:   baseRelDir: true
2:22:33 PM:   buildId: 66eac5e4962a1f0008d4a76b
2:22:33 PM:   deployId: 66eac5e4962a1f0008d4a76d
2:22:33 PM:   packagePath: client
2:22:33 PM: ​
2:22:33 PM: ❯ Current directory
2:22:33 PM:   /opt/build/repo
2:22:33 PM: ​
2:22:33 PM: ❯ Config file
2:22:33 PM:   /opt/build/repo/netlify.toml
2:22:33 PM: ​
2:22:33 PM: ❯ Context
2:22:33 PM:   production
2:22:33 PM: ​
2:22:33 PM: Build command from Netlify app                                
2:22:33 PM: ────────────────────────────────────────────────────────────────
2:22:33 PM: ​
2:22:33 PM: $ npm --workspace walkify-client run build
2:22:34 PM: > walkify-client@0.0.0 build
2:22:34 PM: > vite build
2:22:34 PM: The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
vite v5.4.0 building for production...
2:22:34 PM: transforming...
2:22:35 PM: src/assets/imgs/walkman_blank_3_no_window.png referenced in src/assets/imgs/walkman_blank_3_no_window.png didn't resolve at build time, it will remain unchanged to be resolved at runtime
2:22:36 PM: src/assets/imgs/tapeCase.png referenced in src/assets/imgs/tapeCase.png didn't resolve at build time, it will remain unchanged to be resolved at runtime
✓ 111 modules transformed.
2:22:36 PM: rendering chunks...
2:22:36 PM: computing gzip size...
2:22:36 PM: build/index.html                                                   0.46 kB │ gzip:  0.29 kB
2:22:36 PM: build/assets/monoton-v19-latin-regular-TKmQGCcv.woff2             16.52 kB
2:22:36 PM: build/assets/gloria-hallelujah-v21-latin-regular-BuKjlT1h.woff2   18.60 kB
2:22:36 PM: build/assets/gloria-hallelujah-v21-latin-regular-DgsbTjKx.ttf     33.27 kB
2:22:36 PM: build/assets/monoton-v19-latin-regular-BzQSQFOf.ttf               39.72 kB
2:22:36 PM: build/assets/walkman_blank_2-S_s2UYvr.png                        296.94 kB
2:22:36 PM: build/assets/index-DEBbFljA.css                                   16.58 kB │ gzip:  4.43 kB
2:22:36 PM: build/assets/index-D9WJwFSK.js                                   221.62 kB │ gzip: 74.17 kB
2:22:36 PM: ✓ built in 2.21s
2:22:36 PM: ​
2:22:36 PM: (build.command completed in 2.7s)
2:22:36 PM: ​
2:22:36 PM: Functions bundling                                            
2:22:36 PM: ────────────────────────────────────────────────────────────────
2:22:36 PM: ​
2:22:36 PM: Packaging Functions from netlify/functions directory:
2:22:36 PM:  - login.js
2:22:36 PM:  - refresh.js
2:22:36 PM:  - search.js
2:22:36 PM:  - userSubscriptionLevel.js
2:22:36 PM: ​
2:22:38 PM: ​
2:22:38 PM: (Functions bundling completed in 2.1s)
2:22:38 PM: ​
2:22:38 PM: Deploy site                                                   
2:22:38 PM: ────────────────────────────────────────────────────────────────
2:22:38 PM: ​
2:22:38 PM: Starting to deploy site from 'client/build'
2:22:38 PM: Calculating files to upload
2:22:39 PM: Starting post processing
2:22:39 PM: Post processing - redirect rules
2:22:39 PM: Post processing done
2:22:39 PM: Section completed: postprocessing
2:22:39 PM: Skipping form detection
2:22:39 PM: Post processing - header rules
2:22:39 PM: 2 new file(s) to upload
2:22:39 PM: 0 new function(s) to upload
2:22:39 PM: Section completed: deploying
2:22:39 PM: Site deploy was successfully initiated
2:22:39 PM: ​
2:22:39 PM: (Deploy site completed in 458ms)
2:22:39 PM: ​
2:22:39 PM: A "_redirects" file is present in the repository but is missing in the publish directory "client/build".
2:22:39 PM: ​
2:22:39 PM: Netlify Build Complete                                        
2:22:39 PM: ────────────────────────────────────────────────────────────────
2:22:39 PM: ​
2:22:39 PM: (Netlify Build completed in 5.5s)
2:22:40 PM: Site is live ✨
2:22:40 PM: Caching artifacts
2:22:40 PM: Started saving workspace root node modules
2:22:40 PM: Finished saving workspace root node modules
2:22:40 PM: Started saving build plugins
2:22:40 PM: Finished saving build plugins
2:22:40 PM: Started saving corepack cache
2:22:40 PM: Finished saving corepack cache
2:22:40 PM: Started saving pip cache
2:22:40 PM: Finished saving pip cache
2:22:40 PM: Started saving emacs cask dependencies
2:22:40 PM: Finished saving emacs cask dependencies
2:22:40 PM: Started saving maven dependencies
2:22:40 PM: Finished saving maven dependencies
2:22:40 PM: Started saving boot dependencies
2:22:40 PM: Finished saving boot dependencies
2:22:40 PM: Started saving rust rustup cache
2:22:40 PM: Finished saving rust rustup cache
2:22:40 PM: Started saving go dependencies
2:22:40 PM: Finished saving go dependencies
2:22:40 PM: Build script success
2:22:40 PM: Section completed: building
2:22:41 PM: Uploading Cache of size 91.3MB
2:22:42 PM: Section completed: cleanup
2:22:42 PM: Finished processing build request in 28.842s

How can I get the other images deployed?

[nathanmartin]

@marcobaass

How can I get the other images deployed?

By fixing your build so that it outputs what you want.

Run the same build command that you’re running on Netlify locally and check the output.

You should see the same log messages and the same content in the build/ folder.

If you were to run npm preview after your build, it should show much the same as on Netlify.

How you fix it would depend on what you’re doing and you should consult the Vite documentation:

Static Asset Handling

Once you’ve got the build output working correctly locally, you should expect it to work on Netlify.

[marcobaass]

Thanks a lot. This passage solved it for me:

The public Directory​

If you have assets that are:

• Never referenced in source code (e.g. robots.txt)
• Must retain the exact same file name (without hashing)
• …or you simply don’t want to have to import an asset first just to get its URL

Then you can place the asset in a special public directory under your project root. Assets in this directory will be served at root path / during dev, and copied to the root of the dist directory as-is.

The directory defaults to <root>/public, but can be configured via the publicDir option.

Note that:

• You should always reference public assets using root absolute path - for example, public/icon.png should be referenced in source code as /icon.png.
• Assets in public cannot be imported from JavaScript.

Especially because I also needed some of the images not to be renamed in any way.

[nathanmartin]

@marcobaass

This passage solved it for me:

It usually does, as per this answer I tend to point people to:

Images do not present on Netlify after deploying, but they work well on the local host

@ayush1 You are using Vite, so your issue is the same as many others using Vite. You haven’t read or understood the applicable documentation for Vite. Vite isn’t magic and it won’t work with whatever random project structure you throw at it. You should read the Vite Static Asset Handling Documentation, in particular the section concerning the Public Directory. Note: Anyone else encountering this thread that is using Vite and has an issue with images, favicons, or _redirects files (or other s…