It seems like the issue is related to Vite not copying the images to the build folder after build. One possible solution is to use the copy option in the vite.config.js file to explicitly copy the images to the build folder. Here's an example:
// vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
build: {
rollupOptions: {
input: {
main: './index.html',
},
},
// Copy the images to the build folder
// The `from` path should be relative to the project root
// The `to` path should be relative to the build folder
// In this example, the images will be copied to `dist/assets/img`
assetsDir: 'assets',
assetsInlineLimit: 0,
outDir: 'dist',
copy: [
{
from: 'resources/assets/img',
to: 'assets/img',
},
],
},
});
This configuration will copy all the images from the resources/assets/img folder to the dist/assets/img folder during the build process. Then, you can use the Vite::asset helper to generate the correct URL for the images in your Blade templates:
{{ Vite::asset('assets/img/yoga-1.webp') }}
Make sure to adjust the paths in the copy configuration to match your project structure.