Как я могу отозвать (удалить) предварительный просмотр изображения, созданного с помощью URL.createObjectUrl? - PullRequest
Новая
       56

Как я могу отозвать (удалить) предварительный просмотр изображения, созданного с помощью URL.createObjectUrl?

0 голосов
/ 08 мая 2020

Итак, я сделал предварительный просмотр изображения, отображаемого на экране, и теперь я создал кнопку, которая должна его удалить. Вот что у меня есть до сих пор:

установить переменную состояния, которая представляет предварительный просмотр: 

const [imagePreview, setImagePreview] = React.useState(null);

создать функцию для установки предварительного просмотра для выбранного изображения и передать captureImagePreview ко входу, который помещает выбранное изображение на экран в качестве предварительного просмотра: 

const captureImagePreview = evt => setImagePreview(URL.createObjectURL(evt.target.files[0]));
const revokeImagePreview = () => setImagePreview(URL.revokeObjectURL(imagePreview));

и это блок, в котором предварительный просмотр отображается на экране 

{imagePreview ? (
    <div className="image-preview">
        <img src={imagePreview} alt="" style={{ width: '100%', height: '100%' }} />
        <i className="far fa-times-circle" onClick={revokeImageFileAndPreview}></i>
    </div>
) : <p>No image</p>}

До этого момента он работает хорошо, но когда я нажимаю на элемент i, чтобы выполнить функцию revokeImagePreview, чтобы вернуть этот процесс, скачивая, что предварительный просмотр исчезнет с экрана, он не исчезает вообще.

Как я могу сделать превью исчезают при нажатии кнопки?

...