我正在用CocktailDB API https://www.thecocktaildb.com/api.php构建一个简单的应用程序来练习Nuxt和axios。我很难让图片显示出来,而不仅仅是链接。在console.log中,链接也显示出来了。我如何让API中的图片显示在列表中,而不仅仅是链接?提前感谢!
<template>
<div>
<div>
<SearchDrink/>
</div>
<div>
<div v-for="drink in drinks" :key="drink.id">
<div class="drink">
<p> {{ drink.strDrink
}} </p>
<img src="" alt=""/> {{ drink.strDrinkThumb
}}
<p>Instructions:</p>
<p> {{ drink.strInstructions }} </p>
<div class="ing"> Ingridients:
<p> {{ drink.strIngredient1 }} </p>
<p> {{ drink.strIngredient2 }} </p>
<p> {{ drink.strIngredient3 }} </p>
<p> {{ drink.strIngredient4 }} </p>
<p> {{ drink.strIngredient5 }} </p>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import SearchDrink from '../../components/SearchDrink.vue'
import axios from 'axios'
export default {
components:{
SearchDrink,
},
data(){
return {
drinks: [],
}
},
methods: {
getAllDrinks(){
axios.get('https://thecocktaildb.com/api/json/v1/1/search.php?s=')
.then((response) => {
this.drinks = response.data.drinks
const myDrink = response.data.drinks
console.log(myDrink)
console.log(myDrink.strDrinkThumb)
})
.catch((error) =>{
console.log(error)
})
},
},
created(){
this.getAllDrinks()
},
// methods: {
// searchDrink(){
// if(!this.search){
// return this.drinks
// }else{
// return this.drinks.filter(drink =>
// drink.text.toLowerCase().includes(this.search.
// toLowerCase()))
// }
// }
// },
head(){
return {
title: 'Drinks App',
meta: [
{
hid: 'description',
name: 'description',
content: 'Best place to search a Drink'
}
]
}
}
}
</script>
1条答案
按热度按时间yuvru6vn1#
您没有将图像放在src标记内。
这可以通过使用
v-bind
指令v-bind:src="..."
或:src=".."
来完成示例:
第一个