使用next/image组件时如何在图片不存在的情况下不渲染任何内容

完全可以实现，你可以借助next/image组件提供的onError错误回调配合状态控制即可达到效果：

• 第一步：声明状态变量标记图片是否加载有效
• 第二步：给Image组件绑定onError回调，图片加载失败时更新状态为无效
• 第三步：通过状态判断是否渲染Image组件

代码示例 #

import { useState } from 'react'
import Image from 'next/image'
import { useRouter } from 'next/router' // App Router场景可替换为useParams等对应方法获取locale

// 组件内逻辑
const YourComponent = () => {
  const router = useRouter()
  // 初始默认图片有效
  const [isImageValid, setIsImageValid] = useState(true)

  // 可选优化：前置校验支持的locale，不用等到请求失败再隐藏，减少无效请求
  const supportedLocales = ['zh', 'en', 'ja'] // 替换为你实际支持的多语言标识
  const shouldRenderImage = isImageValid && supportedLocales.includes(router.locale)

  return (
    <>
      {shouldRenderImage && (
        <Image
          src={`/scroll-${router.locale}.svg`}
          alt="scroll"
          width="240px"
          height="240px"
          className="opacity-50"
          onError={() => setIsImageValid(false)}
        />
      )}
    </>
  )
}

说明 #

• 图片请求失败时会触发onError回调，此时更新状态后组件会直接卸载Image，不会显示损坏图标或alt文本
• 该方案完全运行在前端侧，不需要调用服务端fs模块，同时适配Next.js Pages Router和App Router场景，仅需调整获取locale的对应方法即可

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