CODEWITHSUNDEEP
laravelvue.js
Deepak Tiwari
Deepak Tiwari

Reputation: 334

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

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

Upvotes: 13

Views: 31948

Answers (3)

Shuvo
Shuvo

Reputation: 177

Just import the image from the public folder and use it as src.

<template>
    <div>
       <img :src="src" alt="message placeholder image" class="w-full object-cover">
     </div>
</template>

<script setup>
import src from '/public/images/illustrations/messagenotselected.svg'
</script>

Upvotes: 0

dev__rezo
dev__rezo

Reputation: 61

At first bind the value of image source

<img :src="getPhoto() + variableName" />

Then create the function under your methods section and simply return the directory location, that's all.

getPhoto(){
   
  return 'images/';

}
  1. Note that, You cant declare directory location directly to :src attribute.

Upvotes: 0

Mikew305
Mikew305

Reputation: 376

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">

Upvotes: 35

Related Questions