Как проверить, загрузил ли пользователь фото ReactJs

Question

Я хочу стилизовать разные карточки, независимо от того, выбрал пользователь фото или нет. Если они выбрали фотографию, я хочу иметь width: 600px, но если нет, мне не нужна эта миниатюра, и я хочу иметь width из 300px, и я хочу отображать только текст, если пользователь этого не сделал. не загружаю фото. Как я могу узнать, выбрал ли пользователь фото или нет? Пожалуйста, помогите.

Это код:

       return (

  <div className="card" style={{ width: "600px" }} key={i}>
    <div className="card-body">

      <img src={`${
        process.env.REACT_APP_API_URL
        }/post/photo/${post._id}`}
        alt={post.title}
        className="img-thumbnail mr-4 float-left rounded mb-3"
        style={{ height: "400px", width: "300px", objectFit: "fill" }}
      />

      <p className="card-text" style={{ color: "#darkslategray", fontSize: "15px" }}>
        {post.body.substring(0, 50)}
      </p>
      <br />

Answer 1

Вы можете использовать событие onLoad изображения для этой цели, также вы должны поместить некоторый logi c в событие onError. Если вы хотите показать выбранное изображение в элементе изображения, вы можете использовать URL.createObjectURL.

, если вы думаете, что isPicked как состояние, которое вы изменяете в someLogi c и loadLogi c.

<image src={isPicked && URL.createObjectURL(file.data)} onError={someLogic} onLoad={loadLogic} />

Пример:

const [imageSrcIsSet, setImageSrcIsSet] = useState(true);

<Card style={{ width: imageSrcIsSet ? "600px" : "300px" }} > 
<img src={imageSrcProperty} style={{ width: imageSrcIsSet ? "300px" : "0px" }} onError={()=> setImageSrcIsSet(false)} onLoad={() => setImageSrcIsSet(true)} /> 
</Card>

Answer 2

  const [image, setImage] = useState('');  

    const [previewImage, setPreviewImage] = useState();          


 <label htmlFor="image">Image</label>
                    <input 
                    type="file" 
                    name="image"
                    onChange={fileUploadHandler}
                    />

                    <img src={previewImage} className={styles.previewImage}/>

это функция для изменения значения изображения

const fileUploadHandler = (e) => {
        const url = e.target.files[0];
        setImage(url);
        const fileReader = new FileReader();
        fileReader.readAsDataURL(url);
        fileReader.onload = () => {
            setPreviewImage(fileReader.result);
        };
    };

Answer 3

что вы подразумеваете под выбранной фотографией?

но из того, что я могу сказать из кода, вы могли бы сделать что-то вроде этого

const [photoPicked, setPhotoPicked] = useState(false)

// вызовите setPhotoPicked где-нибудь, чтобы переключить состояние выше

return (
    <div>
        <div className="card" style={{ width: photoPicked ? '600px' : '300px' }} key={i}>
        <div className="card-body">

        <img 
            src={`${process.env.REACT_APP_API_URL}/post/photo/${post._id}`}
            alt={post.title}
            className="img-thumbnail mr-4 float-left rounded mb-3"
            style={{ height: "400px", width: "300px", objectFit: "fill" }}
        />

        <p className="card-text" style={{ color: "#darkslategray", fontSize: "15px" }}>
        {post.body.substring(0, 50)}
        </p>
        <br />
    </div>

)

в основном вам нужно установить состояние photoPicked как истинное или ложное и, исходя из этого, изменить ширину