javascript - 下一个/图像不适用于 react-dropzone-component

Question

我曾经next/image显示图像和react-dropzone-component上传文件。 next/image适用于其他图像，但在预览模板中，图像不显示。我该如何解决这个问题？

import React, { Component } from "react";
import Image from "next/image";
import DropzoneComponent from "react-dropzone-component";
import "../../../node_modules/react-dropzone-component/styles/filepicker.css";
import "../../../node_modules/dropzone/dist/min/dropzone.min.css";
import "./ResumeUpload.scss";
const ReactDOMServer = require("react-dom/server");
const filetypes = ["doc", "pdf", "docx", "rtf", "txt"];
export default class ResumeUpload extends Component {
  myDropzone = null;
  state = {
    fileSizeErrorMsg: "File size exceeds 20mb",
    fileTypeErrorMsg: "File type not supported",
    fileSizeError: false,
    fileTypeError: false,
    iconImage: "resume_upload.png",
    isError: false,
    fileName: "",
    isLoading:false
  };

  componentDidMount=()=> {
    this.props.onRef(this);
  }
componentWillReceiveProps=(nextProps)=>{
  if(this.props!==nextProps){    
    this.setState({
      isLoading:nextProps.isLoading
    })
  }
}
  initCallback = (dropzone) => {
    this.mydropzone = dropzone;
  };

  removeFileFromDropzone = (file) => {
    if (this.mydropzone) {
      this.mydropzone.removeAllFiles();
    }
  };

  handleDroppedFile = (file) => {
    let checkDocType = filetypes.includes(file.name.split(".").pop());
    if (checkDocType) {
      if(file && file.size <= 20971520){      
        this.setState(
          {
            fileName: file.name,
          },
          () => {
            this.props.addFile(file);
          }
        );
      } else {
        this.removeFileFromDropzone();
        this.setState({
          fileName: file.name,
          iconImage: "resume_error.png",
          fileSizeError: true,
          isError: true,
        });
      }
    } else {
      this.removeFileFromDropzone();
      this.setState({
        fileName: file.name,
        iconImage: "resume_error.png",
        fileTypeError: true,
        isError: true,
      });
    }
  };
  setDropzone = () => {
    this.setState({
      isError: false,
      iconImage: "resume_upload.png",
    });
  };
  render() {
    let {
      fileSizeError,
      fileTypeError,
      fileSizeErrorMsg,
      fileTypeErrorMsg,
      iconImage,
      isError,     
    } = this.state;
    var componentConfig = {
      iconFiletypes: [".doc", ".pdf", ".docx", ".rtf", ".txt"],
      showFiletypeIcon: false,
      postUrl: "no-url",
    };
    let djsConfig = {
      previewTemplate: ReactDOMServer.renderToStaticMarkup(
        <div className="dz-preview dz-file-preview">
          <div className="custom-dropzone-message">
            <div className="dropzone-img">
              <Image className="image-tag" src={"/static/assets/images/resume_success.png"}  layout="fill"/>           
            </div>
            <div className="dropzone-message">
              <div className="file-name">
                <span data-dz-name></span>
              </div>
              <div className="message">
                <div className="success">Successfully uploaded </div>
                <div className="remove" data-dz-remove>
                  remove
                </div>
              </div>
            </div>
          </div>
        </div>
      ),
      autoProcesQueue: false,
      maxFiles: 1,
      acceptedFiles: ".doc, .pdf,.docx,.rtf,.txt",
      // addRemoveLinks: true,
      // dictRemoveFile: "Remove",
      // dictDefaultMessage:
      //   "drag and drop pdf, jpeg, or bmp files, or click here",
    };

    var eventHandlers = {
      init: this.initCallback,
      addedfile: (file) => this.handleDroppedFile(file),
    };
    return (
      <React.Fragment>
        {isError && (
          <div className="row">
            <div className="col-md-12">
              <div className="error-mes-card">
                <div className="error-mes-section">
                  <div className="error-img">
                    <Image className="image-tag" src={`/static/assets/images/${iconImage}`} layout="fill"/>
                  </div>
                  <div className="error-msg">
                    Something went wrong
                    <br />
                    {fileTypeError && (
                      <div className="error">
                        {fileTypeErrorMsg && fileTypeErrorMsg}
                      </div>
                    )}
                    {fileSizeError && (
                      <div className="error">
                        {fileSizeErrorMsg && fileSizeErrorMsg}
                      </div>
                    )}
                    <div className="try-again" onClick={this.setDropzone}>
                      try again
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}
        {!isError && (
          <div className="row">
            <div className="col-md-12">
              <DropzoneComponent
                config={componentConfig}
                eventHandlers={eventHandlers}
                djsConfig={djsConfig}
              >
                <div className="dz-message" data-dz-message>
                  <div className="custom-dropzone-message">
                    <div className="dropzone-img">
                      <Image className="image-tag" src={`/static/assets/images/${iconImage}`} layout="fill"/>
                    </div>
                    <div className="dropzone-message">
                      {this.props.dropzoneMsg}
                    </div>
                  </div>
                </div>
              </DropzoneComponent>
            </div>
          </div>
        )}
      </React.Fragment>
    );
  }
}

标签： javascriptreactjs