CODEWITHSUNDEEP
phpimagelaravelvue.js
user4383363
user4383363

Reputation:

Display images with VueJS and Laravel

I am trying to display images with VueJS, but it either prints {{ activity.image }} or shows a compilation error. These are the attempts:

<img :src="'{{ activity.image }}'"> // Displays {{ activity.image }}
<img :src="{{ activity.image }}"> // Error
<img :src="'@{{ activity.image }}'"> // Displays @{{ activity.image }}

<img v-bind="src:'{{ activity.image }}'" alt=""> // Error
<img v-attr="src:'{{ activity.image }}'" alt=""> // Error

<img :src={{ activity.image }} alt=""> // Error

How do I do it?

Upvotes: 6

Views: 22435

Answers (6)

Ibrahim BOUHACIDA
Ibrahim BOUHACIDA

Reputation: 21

try to add '/' before the link

Inside blade file:

<img src="{{ asset($table->img) }}">

Vue Component:

<img :src="'/' + table.img">

Upvotes: 1

Taranis
Taranis

Reputation: 344

Maybe someone has similiar problems. I use Vue2, with Vuetify2 and Laravel as my Backend. I tried to first show my image within my Blade file and afterwards with the right path in my Vue component to solve this problem. This worked for me:

Inside my blade file

<img src="{{ asset('images/aaa.jpg') }}">

Vue Component

<img src="images/aaa.jpg">

I tried various approaches with dynamic binding and so forth but this finally worked.

Upvotes: 0

Manish Shah
Manish Shah

Reputation: 53

You can directly point to the image:

<img src="/images/logo.png">

Upvotes: 0

user15135708
user15135708

Reputation: 1

Try like this:
Note: img is in public folder

 
 <templete>
    <img :src="getImage()" class="card-img-top" alt="" />
 </templete>
 <script>
 export default {
           methods:{
                      getImage(){
                          return  'img/images.jpg';
                      }
                  }
             }
  </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Upvotes: 0

Hemanshu WebDeveloper
Hemanshu WebDeveloper

Reputation: 29

Try like this

<img :src="'/images/'+item.images" alt="image" />

Upvotes: 3

Wreigh
Wreigh

Reputation: 3297

I assume activity.image is coming from the JavaScript, since you're using the dot notation.

You can use v-bind:src="activity.image", yes, without the mustache.

or if it came from PHP, you should be using the -> operator.

v-bind:src="{{ $activity->image }}", you need those mustache for the Blade rendering, however you don't need the mustache for the Vue.

Upvotes: 6

Related Questions