Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Lopsum's avatar

404 error on img tag src

Hello everyone ! I started a fresh Laravel 9 app and try viteJS to compile my assets. I encounter a small problem to make my images appear via the img tag. I read the doc to referencing my assets and specifically in the <img> tag.

I tried to do the same way as the doc, but despite that, after run npm run dev, my image does not appear. If I run npm run build, my image is not compiled in public folder.

So, here is my structure :

public/
resources/
├─ images/
│  ├─ logo.svg

And I'm referencing my image in blade this way :

<img src="../../images/logo.svg" width="312" height="80" />

I get a 404 error in the browser for the link http://myapp.test/images/logo.svg However, in CSS, it works if I use a background-image: background-image: url('../images/logo.svg');

Do you have any idea where the issue might have come from? Here is my config :

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/scss/admin.scss',
            ],
            refresh: true,
        }),
    ],
    resolve: {
        alias: [
            {
                find: /^~(.*)$/,
                replacement: '',
            },
        ],
    },
});

Thanks in advance for your help :)

0 likes
9 replies
Lopsum's avatar

Thanks for your answer, it works well with npm run dev. But for the build process? If I execute npm run build, my image is not compiled in my public folder. I add this in my app.js :

import.meta.glob([  
  '../images/**',   
]);
Sinnbeck's avatar

@Vable You said the path was /image/ but use /images/

import.meta.glob([  
  '../image/**',   
]);
Sinnbeck's avatar

@Vable Ah ok :) do you get a directory called /public/build/assets when running npm run build?

Lopsum's avatar

Yep. With my CSS and an image referenced with background-image in my CSS :

https://i.ibb.co/RPGQ44k/img.jpg

Sinnbeck's avatar
Sinnbeck
Best Answer
Level 102

@Vable I just noticed that you are not referencing your app.js file, so that might be the reeason

input: [
                'resources/scss/admin.scss', //add app js as well, as that is where the import.meta is
            ],
2 likes
Lopsum's avatar

Oh... I'm stupid... Indeed, it works better that way 😅 ! Thank you so much for your help and patience.

Please or to participate in this conversation.