我怎样才能出示这张照片？

Question

我试图上传一张图片，但当我尝试时，我没有看到网页上的图像。

import "./styles.css";

const App = () => {
  return (
    <div className="grid bg-white rounded-lg shadow-xl w-11/12 md:w-9/12 lg:w-1/2 h-1 w-1">
      <div className="grid grid-cols-1 mt-5 mx-7 h-3 w-3">
        <label className="uppercase md:text-sm text-xs text-gray-500 text-light font-semibold mb-1">
          Upload Photo
        </label>
        <div className="flex items-center justify-center w-full">
          <label className="flex flex-col border-4 border-dashed w-full h-32 hover:bg-gray-100 hover:border-purple-300 group">
            <div className="flex flex-col items-center justify-center pt-7">
              <svg
                className="w-10 h-10 text-purple-400 group-hover:text-purple-600"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
                ></path>
              </svg>
              <p className="lowercase text-sm text-gray-400 group-hover:text-purple-600 pt-1 tracking-wider">
                Select a photo
              </p>
            </div>
            <input type="file" className="hidden" />
          </label>
        </div>
      </div>
    </div>
  );
};

export default App;

这是我的代码：代码

我不知道在选择图片后我能做些什么来看照片。

你能帮帮我吗？

非常感谢！

Answer 1

更新：您的代码沙箱工作

简而言之，您可以将图像标记的src属性设置为URL.createObjectURL(photo)，其中照片是由表单输入：event.target.files[0]选择的文件。

这是我的密码：

import React, { useState } from 'react'
import logo from '../static/logo.svg'

type FormSubmitFunction = (formdata: React.FormEvent<HTMLFormElement>) => Promise<void>
interface LandingPageProps {
  handleSubmit: FormSubmitFunction
}


const LandingPage = ({ handleSubmit }: LandingPageProps) => {
  const [photo, setPhoto] = useState<File>()
  return (
    <div className='flex flex-col items-center max-w-sm mx-auto'>
      <div className='w-5/12 mt-3 sm:mt-4'><img src={logo} alt='logo' /></div>
      <form className='w-full' onSubmit={handleSubmit}>
        <div>
          <div className="w-11/12 mx-auto">
            <div className={photo ? 'hidden' : 'block'}>
              <h1 className='m-6 text-lg font-bold text-center'>Please upload a photo</h1>
              <input
                id="photoupload"
                name="photo"
                type="file"
                required
                placeholder="Upload photo"
                accept="image/gif, image/jpeg, image/png"
                className="block w-full px-3 py-2 mx-auto mt-2 text-base placeholder-gray-600 bg-white border-2 border-gray-300 shadow-md focus:placeholder-gray-500 focus:bg-white focus:border-gray-600 focus:outline-none focus:ring-0"
                onChange={
                  (event) => {
                    event.target.files && setPhoto(event.target.files[0])
                  }
                }
              />
            </div>
            <div className={photo ? 'block' : 'hidden'}>
              <h1 className='m-6 text-lg font-bold text-center'>Success! Thanks.</h1>
              <img src={photo ? URL.createObjectURL(photo) : undefined} alt={photo ? photo.name : undefined} />
            </div>
          </div>
        </div>
      </form>
    </div >
  )
}

export default LandingPage

好吧..。我更新了你的代码沙箱。通过这个进入App.js，它就能工作.

import "./styles.css";
import React, { useState } from "react";

const App = () => {
  const [photo, setPhoto] = useState();
  return (
    <div className="grid bg-white rounded-lg shadow-xl w-11/12 md:w-9/12 lg:w-1/2 h-1 w-1">
      <div className="grid grid-cols-1 mt-5 mx-7 h-3 w-3">
        <label className="uppercase md:text-sm text-xs text-gray-500 text-light font-semibold mb-1">
          Upload Photo
        </label>
        <div className="flex items-center justify-center w-full">
          <label className="flex flex-col border-4 border-dashed w-full h-32 hover:bg-gray-100 hover:border-purple-300 group">
            <div className="flex flex-col items-center justify-center pt-7">
              {photo && (
                <img src={URL.createObjectURL(photo)} alt={photo.name} />
              )}
              {!photo && (
                <svg
                  className="w-10 h-10 text-purple-400 group-hover:text-purple-600"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
                  ></path>
                </svg>
              )}
              <p className="lowercase text-sm text-gray-400 group-hover:text-purple-600 pt-1 tracking-wider">
                Select a photo
              </p>
            </div>
            <input
              type="file"
              className="hidden"
              onChange={(event) => {
                event.target.files && setPhoto(event.target.files[0]);
              }}
            />
          </label>
        </div>
      </div>
    </div>
  );
};

export default App;