0

我正在尝试使用 Heroku 的新简单文件上传制作一个简单的图片库，并已设法将图片保存到数据库中，但无法在网站上显示它们。我创建了一个“displayImage”函数，我想渲染我上传的图像。但这似乎不起作用。我没有收到任何错误，并且不确定我做错了什么。这是我的代码：

import React from "react";
import SimpleFileUpload, { SimpleFileUploadProvider } from "../components/SimpleFileUpload"
import { useState } from 'react'

const API_KEY = '...'


export default function About() {

  const [file, setFile] = useState()

  const displayImage = (file) => {

    return file.map((file, index) => (
      <div key={index} className="file-display">
        <img>class="gallery" src={file} alt="no"</img>
      </div>
    ))
  };

  return (
    <div className='App'>
      <h1>upload an image</h1>
      <SimpleFileUpload apiKey={API_KEY} onSuccess={setFile} />
      {file && <p> Uploaded: {file}</p>}

      {file && <div className="gallery">
        {displayImage(file)}
</div>}
    </div>
  )
}

我在这里的另一个用户的帮助下进行了一些调整，它似乎正在工作......页面上没有呈现任何内容。有任何想法吗？

4

1 回答 1

1

如果你files是一个 URL 数组，它应该是这样的：

import React, { useState } from "react";
...

export default function About() {
  const [files, setFiles] = useState();

  return (
    <div className="App">
      <h1>upload an image</h1>
      <SimpleFileUpload apiKey={API_KEY} onSuccess={setFile} />
      {files && (
        <div>
          <p> Uploaded: {files.length}</p>
          <div className="gallery">
            <DisplayImages images={files} />
          </div>
        </div>
      )}
    </div>
  );
}

const DisplayImages = ({ images }) =>
  images.map((image, index) => (
    <div key={index} className="file-display">
      <img class="gallery" src={image} alt="no" />
    </div>
  ));
于 2021-01-04T16:53:14.600 回答