Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Laravel Vue - How to make vue to look for images in public folder

Tags:

laravel

vue.js

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

like image 624
Deepak Tiwari Avatar asked Jun 01 '18 19:06

Deepak Tiwari


People also ask

How do I show public images in Laravel?

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.

How do I import an image into Vue component?

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.


1 Answers

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">
like image 160
Mikew305 Avatar answered Oct 03 '22 01:10

Mikew305