Image via import in React In React an image can be imported as a module Webpack will place an image under build root folder into /build/static/media/ and add some hash to a file name Imported variable will be resolved to a path in html src attribute in react
import football from '/pics/football.jpg'
const ImportImage = () => <img src={football.src} />
Image via import in Next Imported image variable variable.src will be resolved to path in src attribute in Next Image from public folder We can manually place an image under public folder, for ex. /public/imgs/va/bulldogs.jpg And then reference it via image src property value, like <img src="/imgs/va/bulldogs.jpg" /> When a production version is built the content of public folder goes into build folder and references will not break
const ReferenceImageDirectly = () => <img src='/imgs/va/bulldogs.jpg' />
Lazy image Ones page is hit all images are loaded, which is not efficient. We load images dynamically on scroll. Lazy images in html Add loading="lazy" attribute to img tag <img src="/path" loading="lazy" alt="…" height="200"/> In dev tools we can see that images are loaded on scroll when we approach them one by one We can not control this browser behavior
function LazyImagesInHtml() {
return (
<div className='container'>
<h1>Images without lazy load</h1>
{Array(170)
.fill('')
.map((el, i) => (
<img
src={`/imgs/va/img${i + 1}.jpg`}
key={`lazyImg${i + 1}`}
loading="lazy"
alt="…"
height="200"
/>
))}
<style jsx>{`
.container {
height: 300px;
overflow: scroll;
border: 1px dotted grey;
}
img {
display: block;
}
`}</style>
</div>
)
}
Lazy images in Next
import Image from 'next/image'
function LazyImagesInNext() {
return (
<div className='container'>
{Array(50)
.fill('')
.map((el, i) => (
<Image
src={`/imgs/va/img${i + 101}.jpg`}
key={`lazyImg${i + 101}`}
alt="some desc"
width="100%"
height="100%"
layout="responsive"
objectFit="contain"
/>
))}
<style jsx>{`
.container {
height: 300px;
overflow: scroll;
border: 1px dotted grey;
position: 'relative';
}
`}</style>
</div>
)
}
Lazy images in React We can use react-lazyload package With this package we have a control on offset scroll distance to an image when it starts being downloaded Note. Did not manage to make it work in a scrollable container.
// components/post/LazyImg.js
import LazyLoad from 'react-lazyload'
export function LazyImg(props) {
return (
<LazyLoad
placeholder={<div>Loading...</div>}
offset={100}
once
scrollContainer={props.scrollContainer}
>
<img
src={props.src || props.path || props.link}
height={props.height || 'auto'}
width={props.width || 'auto'}
/>
<style jsx>{`
img {
box-shadow: ${props.noShadow ? '' : '#898989a3 0px 0px 7px 0px'};
margin: 0 auto;
border-radius: 4px;
margin-top: 10px;
margin-bottom: 10px;
display: block;
max-width: ${props.maxWidth || "100%"};
}
@media screen and (max-width: 480px) {
img {
max-width: 100%;
}
}
`}</style>
</LazyLoad>
)
}
// components/post/LazyImg.js
import LazyLoad from 'react-lazyload'
function LazyImagesInReact() {
return (
<>
{Array(170)
.fill('')
.map((el, i) => (
<LazyImg
src={`/imgs/va/img${i + 1}.jpg`}
key={`lazyImg${i + 1}`}
/>
))}
</>
)
}