Access logo and other assets with Inertia

I have my assets folder inside /public/ as well as /resources/. The assets folder includes and img folder where I keep my logo as well as other assets.

The logo is being displayed in AppLayout.vue so it gets rendered on all pages.

<img src="assets/img/logo.svg" width="165" height="35" alt="" class="logo_normal">

If I visit the main route / I can see the logo, but if I visit a show route like /image/{id} the logo does not appear and in the console I get this

GET http://127.0.0.1:8000/image/assets/img/logo.svg 404 (Not Found)

How do I load the correct path of the logo? And where should I keep my assets folder, in public or resources?

LaryAI

2 years ago

Best Answer

Level 58

To access assets like images with Inertia, you should keep them in the public folder. In your case, move the assets folder from the resources folder to the public folder. Then, update the image source path to start with a forward slash (/) to indicate the root directory.

For example, change this:

<img src="assets/img/logo.svg" width="165" height="35" alt="" class="logo_normal">

to this:

<img src="/assets/img/logo.svg" width="165" height="35" alt="" class="logo_normal">

This should ensure that the logo is displayed on all pages, including the show route.

3 likes

Please or to participate in this conversation.