Question 167249 in Laravel Question posted in
The official Laravel Documentation can be found here.

Laravel: Vite cannot find image manifests after build

I am developing a Laravel 9 application, which is using Blade for UIs. The application uses some pictures which are stored in resources/images folder.
In my Blade views I include the images like this: <img src="{{ Vite::asset('resources/images/logo.png') }}"/>

Everything works fine in dev mode, but when I build my assets with npm run build command and run the application with php artisan serve, I get the following error:

Unable to locate file in Vite manifest: /resources/images/logo.png.

My vite.config.js file has this content:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
                'resources/images/logo.png',
            ],
            refresh: true,
        }),
    ],
});

My package.json file:

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "autoprefixer": "^10.4.13",
        "axios": "^1.1.2",
        "laravel-vite-plugin": "^0.7.2",
        "lodash": "^4.17.19",
        "postcss": "^8.4.21",
        "tailwindcss": "^3.2.4",
        "vite": "^4.0.0"
    },
    "dependencies": {
        "alpinejs": "^3.12.0",
        "flowbite": "^1.6.4",
        "xlsx": "^0.18.5"
    }
}

I have checked the manifest.json file that is created after the build, and the image can be found in it, therefore I don’t understand why I get the error:

  "resources/images/logo.png": {
    "file": "assets/logo-4ed993c7.js",
    "isEntry": true,
    "src": "resources/images/logo.png"
  },
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I was able to solve my problem by placing my static assets (images) to the public/images folder, and this way after build, I can use the images in Blade files like this: <img src="{{ asset("images/logo.png") }}"/>


  2. 0

    you can use like this in blade

        plugins: [
       //
    ],
    outDir: '../public',
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search