twobin / react-lazyload

Lazy load your component, image or anything matters the performance.
MIT License
5.85k stars 487 forks source link

How to show image as placeholder #327

Open windcloak opened 3 years ago

windcloak commented 3 years ago

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 `

` `` ``
dylanfpaul commented 3 years ago

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

tsbajwa commented 3 years ago

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