我正在使用 API 來獲取資料庫型別的資訊。我希望影像顯示在文本的右側，但影像根本不顯示。我嘗試了多個不同的鍵，但仍然沒有。這是它目前的樣子：
影像沒有像你看到的那樣顯示。
這是 JS（它從這里提取資料https://api.tvmaze.com/shows/347/episodes）：
// DATABASE const sunnyList = document.getElementById('sunnyList'); let sunnyInfo = [];
searchBar.addEventListener('keyup', (e) => { const searchTarget = e.target.value.toLowerCase(); const filteredSunny = sunnyInfo.filter(sunny => {
return sunny.name.toLowerCase().includes(searchTarget) || sunny.airdate.toLowerCase().includes(searchTarget) || sunny.airtime.includes(searchTarget) });
displayInfo(filteredSunny); });
const loadLayout = async () => {
try {
const res = await fetch('https://api.tvmaze.com/shows/347/episodes');
sunnyInfo = await res.json();
displayInfo(sunnyInfo);
} catch (err) {
console.error(err);
} };
const displayInfo = (sunny) => {
const htmlString = sunny
.map((sunny) => {
return `
<li >
<div >
<h2>${sunny.name}</h2>
<p>Season ${sunny.season} Episode ${sunny.number}</p>
<p>${sunny.airdate}</p>
<p>${sunny.airtime}</p>
<p>${sunny.rating.average}</p>
</div>
<img src="${sunny.image}"></img>
</li>
`;
})
.join('');
sunnyList.innerHTML = htmlString; };
loadLayout();
我已經試過了sunny.image.medium，sunny.image.original但它仍然沒有出現。
任何幫助表示贊賞:)
uj5u.com熱心網友回復：
該image不是一個URL字串，但具有下列形狀的物體：
{
medium: string,
original: string
}
其中兩個字串都包含實際的影像 URL。
對于您的用例medium可能更有意義，因此您可以這樣做：
<img src="${sunny.image?.medium}"></img>
編輯
添加了可選鏈接，因為某些專案沒有image屬性。
uj5u.com熱心網友回復：
您面臨的問題是并非所有物件都有影像。
請試試這個代碼：
const displayInfo = (sunny) => {
const htmlString = sunny
.map((sunny) => {
const img = sunny.image ? sunny.image.medium : "https://picsum.photos/200/300"
return `
<li >
<div >
<h2>${sunny.name}</h2>
<p>Season ${sunny.season} Episode ${sunny.number}</p>
<p>${sunny.airdate}</p>
<p>${sunny.airtime}</p>
<p>${sunny.rating.average}</p>
</div>
<img src=${img} />
</li>
`;
})
.join('');
sunnyList.innerHTML = htmlString; };
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/355554.html
標籤：javascript