twobin/react-lazyload

How to show image as placeholder

windcloak opened this issue · 2 comments

I am trying to just an image as a placeholder, but instead of showing my image, it just shows a bunch of characters (the data of the image, maybe?) Do you have some sample code I can use cause I'm not doing this right. I also tried to access the image directly, which also didn't work.
placeholder-problem

I have this code

import LazyLoad from 'react-lazyload';
import LazyImg from "../../assets/img/lazyload.png";

I am trying to lazy load a card image
<LazyLoad height={300} placeholder={LazyImg}>
<Card.Img variant="top" src={amiibo.image} />
</LazyLoad>

Try using LazyImg as the src attribute on an img element. Use the img element as the placeholder prop.

You need to change placeholder to placeholder={<img src={LazyImg} />}