Placeholder load different size of image and different place
See original GitHub issueHi, Blue I am using SimpleImg, but when I wanna load an image with a specific size, it loads the placeholder in a different place with a different size. This is the wrapper.
import React from 'react';
import PropTypes from 'prop-types';
import { SimpleImg, SimpleImgProvider } from 'react-simple-img';
const LazyLoadingImage = React.memo(function LazyLoadingImage(props){
const { threshold, img, imgPlaceHolder, duration, height, width } = props;
return (
<SimpleImgProvider
config={{ threshold: [threshold || 0.5] }}
>
<SimpleImg
height={height || 500}
width={width || 500}
sizes={
`(max-width: ${width || 500}px)
(max-height: ${height || 500}px)
`
}
duration={duration || 2}
placeholder={imgPlaceHolder}
src={img}
/>
</SimpleImgProvider>
);
});
LazyLoadingImage.propTypes = {
img: PropTypes.object.isRequired,
imgPlaceHolder: PropTypes.object.isRequired,
};
export default LazyLoadingImage;
And usage
import React, { lazy, Suspense } from 'react';
import ebook from '../../imgs/e-book.png';
import ebookplaceholder from '../../imgs/e-book-placeholder-8.png';
import DivFlex from '../styled/DivFlex';
import logo2 from '../../imgs/Logo2.png';
import logo2placeholder from '../../imgs/logo2-placeholder-8.png';
const LazyLoadingImage = lazy(() => import(/* webpackChunkName: "LazyLoadingImage" */
'../Shared/LazyLoadingImage'));
const MiddleEbook = () => {
return (
<Suspense fallback={<div> Loadding ...</div>}>
<DivFlex style={{ marginTop: '15rem', border: '1px solid red'}}>
<LazyLoadingImage img={ebook} imgPlaceHolder={ebookplaceholder} />
<DivFlex>
<LazyLoadingImage img={logo2} imgPlaceHolder={logo2placeholder}
height={196} width={313}
/>
</DivFlex>
</DivFlex>
</Suspense>
);
};
export default MiddleEbook;
Issue Analytics
- State:
- Created 5 years ago
- Comments:7 (4 by maintainers)
Top Results From Across the Web
css - Placeholder background/image while waiting for full ...
You can't know the width and height of the image until you have loaded the image. It's impossible show the placeholder with exact...
Read more >Simple image placeholders for lazy loading images - Medium
Simple image placeholders for lazy loading images ... It works seamlessly with images with different sizes and aspect ratios.
Read more >Picture Placeholder, Set to Re-size Graphic?
The graphic "fits" within the placeholder, but it is not resized to fit the entire picture within the placeholder. This may be default...
Read more >Lazy Loading Images – The Complete Guide - ImageKit.io
The placeholder image is just 661 bytes in size, as compared to the original image which is 12700 bytes, making it 19x smaller....
Read more >When placeholder is replaced by image it keeps with the size ...
Hello gentlemen,. I'm using your library on a listview to load images, these images are being transformed to fit the max width of...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Hey Bill, It is working… Thanks!!!
hey @aeciolevy,
i think i have nailed it on 1.4.5, upgrade and let me know if that works for you.
thanks bill