Nuxt+CocktailDB API：如何让图片显示而非仅展示链接？

你遇到的问题核心是没有将API返回的图片URL渲染为<img>标签，而是直接输出了字符串链接。以下是具体的解决步骤：

1. 确认数据字段正确性 #

CocktailDB API返回的饮品图片字段是strDrinkThumb，从你描述的控制台能正常看到链接来看，数据获取是没问题的，只需调整模板渲染方式。

2. 在模板中使用<img>标签绑定图片地址 #

假设你已经通过axios将API返回的饮品数据存储在cocktails数组中，在页面模板里通过v-for遍历列表时，用:src绑定图片URL，同时设置alt属性提升可访问性：

<template>
  <div class="cocktail-list">
    <!-- 遍历饮品列表 -->
    <div v-for="(drink, idx) in cocktails" :key="idx" class="drink-card">
      <!-- 绑定图片URL到img标签的src属性 -->
      <img 
        :src="drink.strDrinkThumb" 
        :alt="`${drink.strDrink} 饮品图`"
        class="drink-image"
      >
      <h4>{{ drink.strDrink }}</h4>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cocktails: []
    }
  },
  async mounted() {
    // 示例：调用CocktailDB API获取数据
    const response = await this.$axios.get('https://www.thecocktaildb.com/api/json/v1/1/search.php?s=margarita')
    this.cocktails = response.data.drinks
  }
}
</script>

<style scoped>
.drink-image {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
}
.drink-card {
  margin: 1rem;
  display: inline-block;
}
</style>

3. 避坑提示 #

• 不要用require()包裹外部图片URL：require仅适用于Nuxt项目本地的静态资源，外部API返回的URL直接绑定即可。
• 处理图片加载失败：可以给<img>添加@error事件，设置默认占位图，避免页面出现破损图标：

  <img 
    :src="drink.strDrinkThumb" 
    :alt="drink.strDrink"
    @error="e => e.target.src = '/placeholder.jpg'"
  >
  

内容的提问来源于stack exchange，提问作者tocajossan