Next.js路由中Material UI组件图片无法渲染问题解决咨询

问题原因 #

你现在遇到的图片无法加载问题，是两处代码逻辑和数据结构不匹配导致的：

• 你定义的albums数组中，每一项的photos是单个对象，不是数组。你写的判断条件undefined !== item['photos'] && item['photos'].length里，普通对象不存在length属性，因此判断结果永远为false，图片渲染的代码块完全不会执行。
• 就算条件判断通过，你写的取值逻辑item['photos'][0]['thumbnailUrl']也是针对数组结构写的，photos作为对象不存在0下标，取值会直接报错。

解决方法 #

1. 修正条件判断和取值逻辑 #

将原代码中图片渲染部分的逻辑修改为和你的数据结构匹配：

// 把原来的判断部分替换成下面的代码
{item?.photos && (
  <ButtonBase sx={{ width: 128, height: 128 }}>
    <Img alt="complex" src={item.photos.thumbnailUrl} />
  </ButtonBase>
)}

如果后续你把photos调整为数组结构，再修改为对应逻辑即可：

// 仅当photos是数组时使用这段
{item?.photos?.length > 0 && (
  <ButtonBase sx={{ width: 128, height: 128 }}>
    <Img alt="complex" src={item.photos[0].thumbnailUrl} />
  </ButtonBase>
)}

2. 可选优化（Next.js 专属） #

如果你使用的是Next.js 13及以上版本，可以替换原生img标签为Next.js内置的next/image组件，图片加载性能更好，使用时只需要在项目的next.config.js中配置你用到的远程图片域名即可。

修改完成后刷新页面即可正常加载图片。

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