reactjs - 通过反应挂钩表单上传的图像未显示在父组件上

Question

我在组件中有一个反应钩子表单AddAlbum，其输入显示在父AlbumList组件中。该表单有一个文件字段和三个文本字段。提交后，我可以在父组件中显示文本输入，但不能在图像文件中显示。我有显示所有内容（图像、名称、艺术家、年份）的 initialState，但是当我尝试显示我的输入时，我看到的只是一张带有文本的卡片，以及alt我的图像的文本。

AddAlbum...

// import React, { useState, useContext } from 'react';
import React, { useContext } from 'react';
import { useForm } from 'react-hook-form';
import { ErrorMessage } from '@hookform/error-message';
import { Link, useHistory } from 'react-router-dom';

import { GlobalContext } from '../context/GlobalState';

export const AddAlbum = () => {
  let history = useHistory();

  const { addAlbum, albums } = useContext(GlobalContext);

  // const [cover] = useState();
  // const [name] = useState('');
  // const [artist] = useState('');
  // const [year] = useState('');

  const onSubmit = (data, e) => {
    // console.log(data.cover[0].name);
    console.log(data, e);
    const newAlbum = {
      id: albums.length + 1,
      cover: data.cover[0].name,
      name: data.name,
      artist: data.artist,
      year: data.year,
    };
    addAlbum(newAlbum);
    history.push('/');
  };

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  return (
    <React.Fragment>
      <div className="w-full max-w-sm container mt-20 mx-auto">
        <form onSubmit={handleSubmit(onSubmit)}>
          <div className="w-full mb-5">
            <label
              className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
              htmlFor="cover"
            >
              COVER
            </label>
            <input
              className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:text-gray-600"
              type="file"
              {...register('cover', { required: true })}
            />
          </div>

          <div className="w-full mb-5">
            <label
              className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
              htmlFor="name"
            >
              Name
            </label>
            <input
              className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:text-gray-600"
              type="text"
              {...register('name', { required: true })}
            />
          </div>......


          <div className="flex items-center justify-between">
            <button
              className="mt-5 bg-green-400 w-full hover:bg-green-500 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
              type="submit"
            >
              Add Album
            </button>
          </div>
        </form>
      </div>
    </React.Fragment>
  );
};

这是AlbumList...

import React, { useContext } from 'react';
import { Link } from 'react-router-dom';

import { GlobalContext } from '../context/GlobalState';

export const AlbumList = () => {
  const { albums, removeAlbum } = useContext(GlobalContext);
  return (
    <React.Fragment>
      {albums.length > 0 ? (
        <React.Fragment>
          {albums.map((album) => (
            <div class="bg-white shadow p-3 m-3 rounded lg:w-64">
              <div>
                <img src={album.cover} alt="album cover"></img>
              </div>

              <div class="mt-6">
                <p class="text-lg text-bold tracking-wide text-gray-600 mb-2">
                  {album.name}
                </p>
               </div>
              </div>...
             </React.Fragment>
            </React.Fragment>
);
};

如何显示图像？

标签： reactjsreact-hooksreact-hook-form