MCPcopy
hub / github.com/vercel/next.js / ImageElement

Function ImageElement

packages/next/src/client/legacy/image.tsx:556–671  ·  view source on GitHub ↗
({
  imgAttributes,
  heightInt,
  widthInt,
  qualityInt,
  layout,
  className,
  imgStyle,
  blurStyle,
  isLazy,
  placeholder,
  loading,
  srcString,
  config,
  unoptimized,
  loader,
  onLoadingCompleteRef,
  setBlurComplete,
  setIntersection,
  onLoad,
  onError,
  isVisible,
  noscriptSizes,
  ...rest
}: ImageElementProps)

Source from the content-addressed store, hash-verified

554}
555
556const ImageElement = ({
557 imgAttributes,
558 heightInt,
559 widthInt,
560 qualityInt,
561 layout,
562 className,
563 imgStyle,
564 blurStyle,
565 isLazy,
566 placeholder,
567 loading,
568 srcString,
569 config,
570 unoptimized,
571 loader,
572 onLoadingCompleteRef,
573 setBlurComplete,
574 setIntersection,
575 onLoad,
576 onError,
577 isVisible,
578 noscriptSizes,
579 ...rest
580}: ImageElementProps) => {
581 loading = isLazy ? 'lazy' : loading
582 return (
583 <>
584 <img
585 {...rest}
586 {...imgAttributes}
587 decoding="async"
588 data-nimg={layout}
589 className={className}
590 style={{ ...imgStyle, ...blurStyle }}
591 ref={useCallback(
592 (img: ImgElementWithDataProp) => {
593 if (process.env.NODE_ENV !== 'production') {
594 if (img && !srcString) {
595 console.error(`Image is missing required "src" property:`, img)
596 }
597 }
598 setIntersection(img)
599 if (img?.complete) {
600 handleLoading(
601 img,
602 srcString,
603 layout,
604 placeholder,
605 onLoadingCompleteRef,
606 setBlurComplete
607 )
608 }
609 },
610 [
611 setIntersection,
612 srcString,
613 layout,

Callers

nothing calls this directly

Calls 4

handleLoadingFunction · 0.70
generateImgAttrsFunction · 0.70
errorMethod · 0.65
onErrorFunction · 0.50

Tested by

no test coverage detected