我目前正在嘗試將從 api 檢索到的資料插入到我的 vue.js (3) 專案的 html 中。到目前為止，這是我的代碼：
<template>
<div id="cocktails">
<div class="container">
<img src="{{ data.drinks[0].strDrinkThumb }}" />
<h1>{{ data.drinks[0].strDrink }}</h1>
<h6>{{ data.drinks[0].strDrinkThumb }}</h6>
</div>
<div class="container">
<h1>{{ datatwo.drinks[0].strDrink }}</h1>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
const data = ref(null);
const datatwo = ref(null);
const error = ref(null);
fetch('https://www.thecocktaildb.com/api/json/v1/1/random.php')
.then((res) => res.json())
.then((json) => (data.value = json))
.catch((err) => (error.value = err));
console.log(data)
fetch('https://www.thecocktaildb.com/api/json/v1/1/random.php')
.then((res) => res.json())
.then((json) => (datatwo.value = json))
.catch((err) => (error.value = err));
</script>
我正在做幾個獲取請求，因為我想要來自 api 的幾個不同的隨機結果。在頂部，我添加了我的 img src {{ data.drinks[0].strDrinkThumb }} 但是，當我加載頁面時，它會顯示一個小影像圖示，當我檢查頁面并轉到 html 時，字面意思是源只顯示“{{ data.drinks[0].strDrinkThumb }}”，而它正確地用我的獲取回應包含的字串（URL）替換它。
我似乎無法弄清楚為什么它適用于影像源但不適用于影像源。非常感謝所有幫助，謝謝！
uj5u.com熱心網友回復：
嘗試使用以下之一
<img :src="data.drinks[0].strDrinkThumb" />
或者
<img :src="require(data.drinks[0].strDrinkThumb)" />
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/532093.html
標籤：javascripthtml图片Vue.jsVuejs3