I am fetching a list of movie characters from my backend using axios and rendering them in Bootstrap cards. My objective is to search for the character's name on Giphy and use the obtained URL as the image source for each card.
However, when I attempt this and inspect the Vue devtools, the image source displays as "promise".
<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>
I'm attempting to retrieve the image source with
: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;
}