Как правильно сделать заглушку до загрузки изображения (onLoad)?

Question

[mosikus]

Здравствуйте. На странице нужно использовать 3 разных изображения и сделать для каждой заглушку до загрузки изображения. Способ ниже не работает, а, именно, изображение не отображается, что не так ?

const [isLoading, setLoading] = React.useState(false);
const handleOnLoad = () => {
    setLoading(true);
}

{isLoading === true ? (<img onLoad={handleOnLoad } src="https://i.5sfer.com/post/postImage/thumb-8ipwnn.jpg"/>) : (<div>*Заглушка*</div>)}

https://codesandbox.io/s/loving-worker-dc1x5

Answer 1

[lnked]

У вас не может загрузиться картинка при такой логике ни как, так как у вас isLoading false у вас не рендерится img и не вызывается onLoad

Comments

[mosikus]

Подскажите, а как решить проблему ?

[lnked]

Можно так

Answer 2

[Ice]

Пример правильного использования https://codesandbox.io/s/fragrant-glade-8huj6