I am trying to load images from the public folder in the vue components. The asset helper doesn't work in vue , so I need to use the format
<img :src="'img/ic_add-sm.svg'" >
But instead of looking for the images in the public folder , vue is appending the current URL to the image path. For example , if the url is www.example.com/posts
it adds www.example.com/posts/img/ic_add-sm.svg instead of www.example.com/img/ic_add-sm.svg
Just put your Images in Public Directory (public/... folder or direct images). Public directory is by default rendered by laravel application. Let's suppose I stored images in public/images/myimage.
To import and use image in a Vue. js single file component, we can set the src prop of the image to the image path returned by the require function. to set the src prop of the image to the path returned by require . We call require with the relative path of the image to return the resolved path of the image.
Add a forward slash to the beginning of your image path.
<img :src="'/img/ic_add-sm.svg'">
Since you don't appear to be doing anything special you should be able to just use
<img src="/img/ic_add-sm.svg">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With