Next.js图片渲染异常：组件显示但图片未加载，窗口调整后加载

问题描述 #

渲染<Gallery images={images} />组件时，组件本身可正常显示，但数组内的图片无法加载；只有拖动控制台改变屏幕尺寸后，图片才会加载。

组件代码 #

<ImageListItem key={item} position="relative">
  <Image
    lazyBoundary="100px"
    placeholder="blur"
    blurDataURL="/loading-image.jpg"
    onClick={() => openLightbox(i)}
    style={{
      filter: theme.palette.mode === "dark" ? "brightness(0.7)" : "none",
      cursor: "pointer",
      borderRadius: 8,
    }}
    layout="fill"
    src={item}
    alt="Job Listing"
  />
</ImageListItem>

组件层级关系 #

• CareerOpening -> Main
• Main -> Gallery

图片加载流程（CareerOpening.js） #

1. 通过useRouter()获取id，触发职位列表数据获取：

useEffect(() => {
    id && retrieveJobListingInformation();
  }, [id]);

2. 当职位列表数据jobListingInformation可用时，调用getLogo()、retrieveEmployerInformation()和listJobListingImages()（该函数遍历数组并将Blobs推入其中）：

useEffect(() => {
    getLogo();
    retrieveEmployerInformation();
    listJobListingImages();
  }, [jobListingInformation]);

3. 最终将状态作为props逐层传递给<Main />，再传递给<Gallery/>。

补充说明 #

• <Gallery />可正确打印images数组，数据传递无问题
• 将<Image/>替换为原生<img/>后，问题依然存在

解决方案 #

1. 确保状态更新触发重渲染 #

检查listJobListingImages()是否正确更新images状态：必须创建新数组而非修改原数组，React依赖数组引用变化触发组件重渲染。

// 错误写法：修改原数组无法触发重渲染
images.push(newBlobUrl);
setImages(images);

// 正确写法：创建新数组
setImages(prevImages => [...prevImages, newBlobUrl]);

2. 强制Gallery组件重渲染 #

若数据传递正常但组件未触发更新，可给<Gallery/>添加强制更新的key：

<Gallery images={images} key={images.length} />

或在Gallery组件内部监听images变化，手动触发重绘：

useEffect(() => {
  // 延迟触发resize事件，模拟窗口尺寸变化的渲染逻辑
  setTimeout(() => {
    window.dispatchEvent(new Event('resize'));
  }, 0);
}, [images]);

3. 验证Blob URL有效性 #

确认listJobListingImages()生成的Blob URL有效：在Gallery组件中打印item值，直接复制到浏览器地址栏打开，检查是否能正常显示图片。若Blob URL失效，需确保组件挂载期间Blob对象未被提前释放。

4. 修复父容器布局约束 #

如果使用Next.js的Image组件且设置了layout="fill"，需给父容器ImageListItem添加明确的宽高约束，否则图片无法正确渲染：

<ImageListItem key={item} style={{position: 'relative', width: '100%', height: 240}}>
  {/* 内部Image组件 */}
</ImageListItem>

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