Dropzone ui 包，图像预览未出现

Question

我刚刚安装 (https://www.npmjs.com/package/dropzone-ui)，当我将一些文件放在拖放区时，我实际上可以看到文件项已加载并且显示文件图标预览，但当文件被删除时没有预览一个图像。我做错了什么吗？

查看我的代码：

import { Dropzone, FileItem, FullScreenPreview } from "dropzone-ui";
import { useState } from "react";

export default function MyDropzone() {
  const [files, setFiles] = useState([]);
  const [imageSrc, setImageSrc] = useState(undefined);

  const updateFiles = (incomingFiles) => {
    console.log("incoming files", incomingFiles);
    setFiles(incomingFiles);
  };

  const onDelete = (id) => {
    setFiles(files.filter((x) => x.id !== id));
  };

  return (
    <Dropzone
      onChange={updateFiles}
      value={files}
      maxFileSize={40000}
      label="Drag'n drop your files here or click to browse"
      accept="image/*"
      fakeUploading
    >
      {files.map((file) => (
        <FileItem
          {...file}
          onDelete={onDelete}
          info
        />
      ))}
    </Dropzone>
  );
}

您可以在此处查看 UI 上的内容： screenshot

Answer 1

添加预览属性

{files.map((文件)=>( ))}

Dropzone ui 包，图像预览未出现

Dropzone ui package, image preview not appearing

frontend

drag

npm

reactjs

drop