调用TVMaze剧集API获取的图片无法正常显示问题求助

解决方案 #

• 核心原因分析：
  • 该API返回的部分剧集没有封面资源，image字段会返回null，直接访问image.medium/image.original会触发JS报错打断渲染
  • 你当前代码直接把image对象赋值给src属性，浏览器无法识别对象类型的资源地址，导致加载失败
• 修正后的代码：

const displayInfo = (sunny) => {
    const htmlString = sunny
        .map((sunnyItem) => {
            // 空值判断，image存在则取medium规格，不存在用本地占位图
            const imgSrc = sunnyItem.image ? sunnyItem.image.medium : '你的本地占位图路径';
            return `
            <li class="character" style="display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;">
              <div class="detail">
                <h2>${sunnyItem.name}</h2>
                <p>Season ${sunnyItem.season} Episode ${sunnyItem.number}</p>
                <p>${sunnyItem.airdate}</p>
                <p>${sunnyItem.airtime}</p>
                <p>${sunnyItem.rating.average || '暂无评分'}</p>
              </div>
              <img src="${imgSrc}" alt="${sunnyItem.name}封面">
            </li>
        `;
        })
        .join('');
    sunnyList.innerHTML = htmlString;
};

• 补充说明：
  • 给li加了flex布局属性，自动实现文本居左、图片居右的展示效果
  • 同步给评分字段加了空值兜底，避免无评分的条目显示undefined
  • img标签本身是单标签，不需要写闭合的</img>，代码里已经修正
  • 修正了map参数与外层变量重名的潜在问题，避免变量冲突

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