Estoy tratando de implementar la vista previa de la imagen antes de cargar el archivo en NextJs. Cuando leo el resultado y trato de mostrarlo, no funciona como de costumbre. La imagen se rompe. He añadido el código a continuación. Cualquier entrada apreciada para solucionar este problema.

Editar: esto se resolvió parcialmente convirtiendo el búfer en una URL de blob. Funciona perfectamente con la etiqueta img, pero next/image todavía no es compatible con las URL de blob.

código

 import React, { useCallback } from 'react'; import { useDropzone } from 'react-dropzone'; import Image from 'next/image'; import australia from '../public/images/australia.png'; const Create: React.FC<{ onClose: () => void }> = ({ onClose }) => { const [uploadedImage, setUploadedImage] = React.useState<any>(); 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 = () => { // Do whatever you want with the file contents const binaryStr = reader.result //changed this to blob url working perfectly with img tag not with Image tag. setUploadedImage(URL.createObjectURL(file)); } reader.readAsArrayBuffer(file) }) }, []); return ( <> <div {...getRootProps()} className="p-7 border-2 border-dashed my-5 focus:border-indigo-500"> <input {...getInputProps()} /> { isDragActive ? <p>Drop the files here...</p> : <p>Drag 'n' drop some files here, or click to select files</p> } </div> <img src={uploadedImage || '/images/australia.png'} /> </> );

Consola de errores