6

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?

Improve this question
3
  • where is activity.image coming from? Vue or PHP? Commented Dec 14, 2017 at 3:43
  • Can we see the script part of your code? Commented Dec 14, 2017 at 3:45
  • what's in activity object? can you paste that in your question? Commented Dec 14, 2017 at 3:46

6 Answers 6

Reset to default
6

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.

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

2 Comments

v-bind:src="activity.image" was the solution. I don't think I'd ever think of it. Thank you.
remember when using v-bind you don't need to do interpolation a.k.a. {{}} :)
3

Try like this

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

Comments

1

try to add '/' before the link

Inside blade file:

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

Vue Component:

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

Comments

0

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>

Improve this answer

Comments

0

You can directly point to the image:

<img src="/images/logo.png">
Improve this answer

Comments

0

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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.