How do I get the images to show in divs, not only the link. Nuxt, CocktailDB API-CodePudding

Im building a simple app to practise Nuxt and axios with the CocktailDB API

CodePudding user response：

you're not putting the image inside the src tag.

This can be done using the v-bind directive as v-bind:src="..." or :src=".."

Example :

new Vue({
  el: "#app",
  
  data: () => ({
    drinks: []
  }),
  mounted(){
    axios.get('https://thecocktaildb.com/api/json/v1/1/search.php?s=')
          .then((response) => {
            this.drinks = response.data.drinks
          })
  }
})

img {
  height: 200px;
  width: 200px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.2.1/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <ul>
    <li v-for="drink of drinks">
      <img :src="drink.strDrinkThumb"/>
    </li>
  </ul>
</div>