Next.js中Image组件无法展示FileReader读取的上传图片预览结果如何解决？

Next.js 原生的next/image组件默认开启了图片优化逻辑，会对图片路径做域名白名单校验，仅支持配置过的远程域名、public目录下的本地静态资源路径，默认不识别blob:、data:类型的本地临时路径，所以会加载失败。

方案1：添加unoptimized属性禁用优化（最简便） #

给next/image组件添加unoptimized属性，即可关闭该图片的优化逻辑，直接透传路径渲染，完美支持blob URL：

// 首先补全useDropzone的解构，你当前代码漏了这行
const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });

// 渲染部分替换原生img为next/image
<Image
  src={uploadedImage || '/images/australia.png'}
  alt="预览图"
  width={500}
  height={300}
  unoptimized // 核心配置，加这行即可
/>

方案2：转为Base64 Data URL实现兼容 #

如果不想用blob URL，也可以直接用FileReader读取为Base64路径，同样搭配unoptimized使用：

const onDrop = useCallback(acceptedFiles => {
  acceptedFiles.forEach((file) => {
    const reader = new FileReader()
    reader.onabort = () => console.log('file reading was aborted')
    reader.onerror = () => console.log('file reading has failed')
    reader.onload = () => {
      setUploadedImage(reader.result as string);
    }
    reader.readAsDataURL(file) // 直接读取为Data URL
  })
}, []);

注意点 #

使用URL.createObjectURL生成的blob URL会占用浏览器内存，记得在组件卸载、或者切换上传文件时调用URL.revokeObjectURL(uploadedImage)释放内存，避免内存泄漏。

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