Vue 3中无法将API数据作为img src渲染的问题求助

核心原因 #

Vue 3中，HTML属性不能使用双大括号{{}}插值，双大括号仅适用于文本内容的渲染。当你在img的src属性中写{{ data.drinks[0].strDrinkThumb }}时，浏览器会将其视为字符串字面量，不会被Vue解析，因此src值仍为插值表达式本身，导致图片加载失败；而h标签中的文本属于内容插值，所以能正常解析。

解决方案 #

使用Vue的属性绑定语法（v-bind:或简写:）来绑定动态属性值：

修改img标签为：

<img :src="data.drinks[0].strDrinkThumb" />

或者完整写法：

<img v-bind:src="data.drinks[0].strDrinkThumb" />

额外优化：避免加载前的报错 #

由于data初始值为null，在API请求完成前直接访问data.drinks[0]会抛出Cannot read properties of null的错误，建议添加可选链操作符或v-if判断：

方法1：使用可选链操作符（推荐）

<img :src="data?.drinks?.[0]?.strDrinkThumb" alt="Cocktail" />
<h1>{{ data?.drinks?.[0]?.strDrink }}</h1>
<h6>{{ data?.drinks?.[0]?.strDrinkThumb }}</h6>

方法2：添加v-if判断数据是否加载完成

<div class="container" v-if="data && data.drinks && data.drinks[0]">
    <img :src="data.drinks[0].strDrinkThumb" alt="Cocktail" />
    <h1>{{ data.drinks[0].strDrink }}</h1>
    <h6>{{ data.drinks[0].strDrinkThumb }}</h6>
</div>

修改后的完整代码示例 #

<template>
    <div id="cocktails">
        <div class="container" v-if="data?.drinks?.[0]">
            <img :src="data.drinks[0].strDrinkThumb" alt="Cocktail" />
            <h1>{{ data.drinks[0].strDrink }}</h1>
            <h6>{{ data.drinks[0].strDrinkThumb }}</h6>
        </div>

        <div class="container" v-if="datatwo?.drinks?.[0]">
            <h1>{{ datatwo.drinks[0].strDrink }}</h1>
        </div>

        <div v-if="error">加载出错：{{ error.message }}</div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
const data = ref(null);
const datatwo = ref(null);
const error = ref(null);

// 封装请求逻辑避免重复代码
const fetchCocktail = async () => {
    try {
        const res = await fetch('https://www.thecocktaildb.com/api/json/v1/1/random.php');
        return await res.json();
    } catch (err) {
        error.value = err;
    }
};

// 并行发起两个请求
Promise.all([fetchCocktail(), fetchCocktail()])
    .then(([res1, res2]) => {
        data.value = res1;
        datatwo.value = res2;
    });
</script>

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