How to add an image on a vue component?

Question

I tried add and image on my vue component :

<img src="/storage/app/product_images/up.png" alt="">

but i get this error:

and i am sure that the file exist.

this a laravel / vue project.

you can also pass image as base64 in API, just create an image in the backend and converted it into base64 and pass it, nobody knows about your project directory structure as well. — Gaurav Gupta
– Gaurav Gupta, Commented Aug 23, 2021 at 22:12
@GauravGupta why would you pass the images as base64? That will make the API responses bigger and slower. Since it's a Laravel app, the project structure is clear. He just needs to use the storage public dir. — Gert B.
– Gert B., Commented Aug 24, 2021 at 7:53

grovskiy · Accepted Answer · 2021-09-03 08:56:32Z

1

Try placing pictures in the public/img/

And in Vue component use path like this

<img src="/img/product_images/up.png" alt="">

Here you can see the details of my answer

And here are other options for using pictures in a bundle of Laravel and Vue

answered Aug 25, 2021 at 13:26

grovskiy

8086 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.