如何在react中检查镜像是否有效？

import React, { useState } from 'react';

const ImageChecker = () => {
  const [imageUrl, setImageUrl] = useState('');
  const [isValid, setIsValid] = useState(false);

  const checkImageValidity = () => {
    fetch(imageUrl)
      .then(response => {
        setIsValid(response.ok);
      })
      .catch(error => {
        setIsValid(false);
        console.error('Error checking image validity:', error);
      });
  };

  return (
    <div>
      <input type="text" value={imageUrl} onChange={e => setImageUrl(e.target.value)} />
      <button onClick={checkImageValidity}>Check Image Validity</button>
      {isValid ? (
        <p>The image is valid.</p>
      ) : (
        <p>The image is not valid or an error occurred while checking.</p>
      )}
    </div>
  );
};

export default ImageChecker;