axios 如何让图片显示在div中,而不仅仅是链接,Nuxt,CocktailDB API

sqxo8psd  于 2022-12-12  发布在  iOS
关注(0)|答案(1)|浏览(202)

我正在用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>

yuvru6vn

yuvru6vn1#

您没有将图像放在src标记内。
这可以通过使用v-bind指令v-bind:src="...":src=".."来完成

示例:

第一个

相关问题