裁剪后的图像url作为道具反应

Question

我目前正在尝试实现一个来自(react-image-crop)的裁剪和一个youtube上的教程。裁剪者是：

export const Cropper = (base64Image) => {   
    const [src, selectFile] = useState(null); 
    const handleFileChange = e => {
      selectFile(URL.createObjectURL(e.target.files[0]))
    }
    const [image, setImage] = useState(null)
    const [crop, setCrop] = useState({ aspect: 16 / 9,width: 300, height:200 });
    const [result, setResult] = useState(null);
    
    function getCroppedImg() {
      const canvas = document.createElement('canvas');
    const scaleX = image.naturalWidth / image.width;
    const scaleY = image.naturalHeight / image.height;
    canvas.width = crop.width;
    canvas.height = crop.height;
    const ctx = canvas.getContext('2d');

    ctx.drawImage(
      image,
      crop.x * scaleX,
      crop.y * scaleY,
      crop.width * scaleX,
      crop.height * scaleY,
      crop.width,
      crop.height,
      0,
      0,
    );
    
    const base64Image = canvas.toDataURL('image/jpeg');
    setResult(base64Image);
    } 
    return (
      <div className= 'container'>
        <div className = 'column' padding = '1rem'> 
            <div  className = 'col-6'>
              <input type = 'file' accept='image/*' onChange= {handleFileChange} />
            </div>
            {src && <div className = 'col-6' padding ='1rem'>
                <ReactCrop src={src} onImageLoaded={setImage} crop={crop} onChange={setCrop} />
                <Button color = 'secondary' variiant='outlined' onClick={getCroppedImg}> Crop Image </Button> 
           </div> }

            {result && <div className='col-6'>
            <img src={result} alt='Cropped Image' className='img-fluid' />
      
            </div> }
        </div>
     </div>      
  )
}

现在，在const base64image中裁剪的图像，我想把它作为一个道具传递给一个父组件(函数组件)，我该怎么做呢？我在父组件上有这个

 {base64Image && 
            <div className='col-6'>
            <img src="require('image/jpeg')" alt='Cropped Image' className='img-fluid' />
            </div> }

我是react的新手

Answer 1

数据URL应用作img src属性，如下所示：

<img src={base64Image} alt='Cropped Image' className='img-fluid' />