Vue How to properly bind src with output from API

Question

I'm creating a movie DB app with vue and I'm trying to output an image source that is being fetched from an API. For some reason the output of the src is not being rendered as it should in the app. It prints the string {{movie.Poster}}. I'm obviously not using v-bind in the right way. So any ideas on how I would print the path to the poster in the right way?

<template>
  <div class="my-10">
    <h2 class="text-bold">{{ movie.Title }}</h2>
    <img v-bind:src="'{{movie.Poster}}'"/>
  </div>
</template>

https://stackoverflow.com/questions/45880956/how-to-use-img-src-in-vue-js — The Alpha, Mar 27 '21 at 18:37

score 1 · Accepted Answer · answered Mar 27 '21 at 18:36

1

You need to use

<img :src="movie.Poster"/>

because {{ .. }} is template literals. So it output a string.

answered Mar 27 '21 at 18:36

Bulent

3,307
1
14
22

Wasn't harder than that I see Thanks! – Oskar Mikael Mar 27 '21 at 18:38

Vue How to properly bind src with output from API

1 Answers1