如何使图像文件默认显示在上传组件中?(React.js)

Question

我正试图用React创建一个图像文件上传器，该上传器显示用户选择的文件的预览。我能够做到，当用户选择一个图像时，该图像会被预览并正确显示。但是，我希望我的"/images/user-solid.jpeg"路径中的默认图像在默认情况下显示，并用用户选择的任何图像替换它。我怎样才能做到这一点？如有任何信息，我们将不胜感激，谢谢！这里有一个codesandbox链接：https://codesandbox.io/s/silly-mountain-ynp569?file=/src/App.js

上传.jsx:

import '../../components/pages/styles/Uploads.css';
import {useEffect, useState} from 'react';
import {} from 'react-router-dom';
import {useSelector} from 'react-redux';
import axios from 'axios';
import authHeader from '../../services/auth-header';
function Uploads() {
const {user: currentUser} = useSelector((state) => state.auth);
const [file, setFile] = useState();
const [description, setDescription] = useState('');
const [loading, setLoading] = useState(false);
const [content, setContent] = useState('');

const imageSubmit = async (event) => {
event.preventDefault();
const formData = new FormData();
formData.append('file', file);
const result = await axios.post(
API_URL + '/image/upload',
formData,
{
headers: {...authHeader(), 'Content-Type': 'multipart/form-data'},
}
);
console.log(result.data);
};
return (
<div className='page'>
<div className='upload-card'>
{file && (
<div id='preview'>
<img
src={URL.createObjectURL(file)}
id='image'
alt='Thumbnail'
className='user-post'
/>
</div>
)}
</div>
<div className='upload-container'>
<div className='post-form-container'>
<p id='upload-form-label'>
Hello, {currentUser.username} feel free to post an image!
</p>
<form
onSubmit={profileImageSubmit}
// onSubmit={'return Validate(this);'}
className='upload-form'
>
<div className='panel'>
<div className='button_outer'>
<div className='btn_upload'>
<input
filename={file}
onChange={(e) => setFile(e.target.files[0])}
type='file'
accept='image/*'
id='image-selection-btn'
Upload
Image
></input>
Choose your Art
</div>
</div>
</div>
<button type='submit' id='post-upload-btn'>
Upload Image
</button>
</form>
</div>
</div>
</div>
);
}
export default Uploads;

Answer 1

简单地看一下这个代码：

import "./styles.css";
import { useEffect, useState } from "react";
import {} from "react-router-dom";
import { useSelector } from "react-redux";
import axios from "axios";
export default function App() {
const [file, setFile] = useState();
const [description, setDescription] = useState("");
const [loading, setLoading] = useState(false);
const [content, setContent] = useState("");
const [preview, setPreview] = useState(null);
const onAddImage = (file) => {
window.URL.revokeObjectURL(preview);
setPreview(window.URL.createObjectURL(file));
};
return (
<div className="page">
<div className="upload-card">
<div id="preview">
<img
src={preview || require("./assets/user-solid.jpeg")}
id="image"
alt="Thumbnail"
className="user-post"
/>
</div>
</div>
<div className="upload-container">
<div className="post-form-container">
<p id="upload-form-label">Hello, feel free to post an image!</p>
<form
// onSubmit={'return Validate(this);'}
className="upload-form"
>
<div className="panel">
<div className="button_outer">
<div className="btn_upload">
<input
filename={file}
onChange={(e) => onAddImage(e.target.files[0])}
type="file"
accept="image/*"
id="image-selection-btn"
></input>
Choose your Art
</div>
</div>
</div>
<button type="submit" id="post-upload-btn">
Upload Image
</button>
</form>
</div>
</div>
</div>
);
}

工作沙盒：

https://codesandbox.io/s/flamboyant-murdock-306b17?file=/src/App.js