Assets
Next.js can serve static files, like images, under the top-level public
directory. Files inside public
can be referenced from the root of the application similar to pages
.
/public/vercel.svg
<img src="/vercel.svg" alt="Vercel Logo" className="logo" />
This next/image
component uses browser native lazy loading, w
Src must be statically imported o absolute external URL, or an internal loader prop.
When using an external URL, you must add it to remotePatterns in next.config.js
.
import Image from 'next/image'
import profilePic from '../public/me.png'
const Example = () => (
<div className="grid-element">
<Image
src={profilePic}
alt="Picture of the author"
width={500}
height={500}
/>
<Image
src="/example.png"
alt="Picture of the author"
fill
sizes="(max-width: 768px) 100vw,
(max-width: 1200px) 50vw,
33vw"
/>
</div>
)
Custom Loader
const myLoader = ({ src, width, quality }) => {
return `https://example.com/${src}?w=${width}&q=${quality || 75}`
}
const MyImage = (props) => {
return (
<Image
loader={myLoader}
src="me.png"
alt="Picture of the author"
width={500}
height={500}
/>
)
}
Last updated