Поиск giphy URL в списке v-for (Vue.js)

У меня есть список персонажей фильмов, которые я получаю от вызова REST на свой сервер с помощью axios. Я показываю их в загрузочной карточке для каждого символа. То, что я пытаюсь сделать, это найти giphy по имени персонажа и использовать URL-адрес giphy как img-src для карты.

Когда я пробую это и заглядываю в инструменты разработки Vue, img-src показывает «обещание».

<template>
  <div class = "characters">
    <b-container>
      <b-card-group columns>
        <b-card
          v-for = "character in characters"
          v-bind:key = "character.id"
          :title = "character.name"
          :img-src = "getGiphy(character.name)"
          img-alt = "Image"
          img-top
          tag = "article"
          style = "max-width: 20rem;"
          class = "mb-2"
        >
          <b-card-text>
            This character is a {{character.role}}
          </b-card-text>
        </b-card>
      </b-card-group>
    </b-container>
  </div>
</template>

я пытаюсь получить источник изображения с помощью :img-src = "getGiphy(character.name)"

@Component
export default class Characters extends Vue {
  public characters: Character[] = [];
  public fields: string[] = ['name', 'role'];

  public async getGiphy(name: string) {
    const giphyApi: string =
      '//api.giphy.com/v1/gifs/search?api_key=xxxxxxxxxxx&limit=1&q=';
    const response = await axios.get(giphyApi + name);
    return response.data.data[0].image_url;
  }

  private async created() {
    const response = await axios.get('/api/characters');
    this.characters = await response.data._embedded.characters;
  }