Homecomponentsinformational

LocalImage

An image fetched from a local source.

Use LocalImage to show an image from a locally imported image.

This is similar to RemoteImage in all ways, except it is specifically only for locally imported images: import logoImage from './logo.svg'.

Next/Image performs some optimizations for local images. Please refer to the docs: https://nextjs.org/docs/basic-features/image-optimization#local-images.

API

image

Required

The imported image.

StaticImport

cornerRadius

The amount by which to round the image corners.

ResponsiveValue

brightness

The brightness of the image between 0 and 1. Set over 1 to over brigthen the image.

number

blur

The amount by which to blur the image.

none

medium

large

small

xlarge

saturate

The amount by which to saturate or desaturate the image. Set over 1 to over saturate the image.

number

height

SafeNumber

objectFit

ObjectFit

objectPosition

ObjectPosition<string | number>

width

SafeNumber

layout

fill

fixed

intrinsic

responsive

lazy

eager

alt

string

placeholder

blur

empty

quality

SafeNumber

priority

true

false

unoptimized

true

false

data

An object with the data keys and values.

DataAttributeMap

itemID

string

itemProp

string

itemRef

string

itemScope

true

false

itemType

string