Homecomponentsinformational
RemoteImage
An image fetched from a remote source.
Use RemoteImage to display an image from external source or CDN.
Aspect Ratio
Use aspectRatio to set the aspect ratio of the image. Using aspectRatio also sets the layout to fill.
Corner Radius
Use cornerRadius to set the corner radius of the image.
Brightness
Use brightness to set the brightness of the image.
Saturation
Use saturation to set the saturation of the image.
Blur
Use blur to blur the image.
Next/Image Features
We provide a lot of features from Next/Image as is. See the API below.
- Guides: https://nextjs.org/docs/basic-features/image-optimization
- API docs: https://nextjs.org/docs/api-reference/next/image
- Demo: https://image-component.nextjs.gallery
Examples
Card Photos
A very common use of RemoteImage is to display a photo in a card.
Tobias Tullius
PhotographerTobias Tullius
PhotographerTobias Tullius
PhotographerRounded Avatars
Another very common use is to display photos of people.
API
url
Required
string
width
number
height
number
aspectRatio
number
cornerRadius
brightness
number
blur
none
small
medium
large
xlarge
saturation
number
objectFit
ObjectFit
objectPosition
ObjectPosition<string | number>
layout
fill
intrinsic
fixed
responsive
loading
lazy
eager
alt
string
placeholder
blur
empty
quality
SafeNumber
priority
true
false
blurDataURL
string
unoptimized
true
false
data
DataAttributeMap
itemID
string
itemProp
string
itemRef
string
itemScope
true
false
itemType
string