He escrito el código mencionado a continuación para cargar una imagen en el componente React con la ayuda de bootstrap y tengo dos problemas,

Problema: 1) Quería dar validaciones para permitir solo imágenes .png/.jpg, pero incluso si estoy cargando una imagen .jpg/.png, recibo la alerta de que "El archivo no es compatible. Debe usar .png o .png. jpg" que se supone que no debe mostrarse.

Problema: 2) Quería que el usuario subiera la imagen e hice el componente de acuerdo con eso. Sin embargo, quiero dar una imagen ficticia para que se muestre en el div incluso antes de que el usuario cargue la imagen. Entonces, ¿cómo puedo hacer eso exactamente?

Cualquier ayuda con respecto a lo mismo es muy apreciada....!

Código:

 import React, { Component, useState } from "react"; import "./style.css"; const FinalModeling = () => { const [file, setFile] = useState(null); const fileChangedHandler = (event) => { let file = event.target.files[0]; let reader = new FileReader(); console.log(file); reader.onload = function (e) { setFile(e.target.result); }; reader.readAsDataURL(event.target.files[0]); if (file != ".png" || file != ".jpg") { window.alert("File does not support. You must use .png or .jpg "); return false; } if (file.size > 10e6) { window.alert("Please upload a file smaller than 10 MB"); return false; } }; return ( <div id="modeling"> <div className="container"> <div className="row"> <div className="col"> <div className="modeling-text"> </div> </div> </div> <img src={"file"} alt={""} width="180" height="220" text-align="left" style={{ display: "block" }} class="img-thumbnail" /> </div> <div class="input-group mt-1 offset-1"> <div class="custom-file smaller-input"> <input type="file" className="custom-file-input" name="file" inputProps={{ accept: "image/*" }} onChange={fileChangedHandler} id="inputGroupFile01" /> <label class="custom-file-label" for="inputGroupFile01"> Choose your image </label> </div> </div> </div> ); }; export default FinalModeling;