diff --git a/source/utils.ts b/source/utils.ts index f1d451e3..d880bae9 100644 --- a/source/utils.ts +++ b/source/utils.ts @@ -470,8 +470,8 @@ export const getStyleModalImg: GetStyleModalImg = ({ containerWidth: imgRect.width, hasScalableSrc, offset, - targetHeight: loadedImgEl?.naturalHeight ?? imgRect.height, - targetWidth: loadedImgEl?.naturalWidth ?? imgRect.width, + targetHeight: loadedImgEl?.naturalHeight || imgRect.height, + targetWidth: loadedImgEl?.naturalWidth || imgRect.width, }) const styleImgObjectFit = isImgObjectFit @@ -484,8 +484,8 @@ export const getStyleModalImg: GetStyleModalImg = ({ objectFit: targetElComputedStyle.objectFit, objectPosition: targetElComputedStyle.objectPosition, offset, - targetHeight: loadedImgEl.naturalHeight, - targetWidth: loadedImgEl.naturalWidth, + targetHeight: loadedImgEl?.naturalHeight || imgRect.height, + targetWidth: loadedImgEl?.naturalWidth || imgRect.width, }) : undefined @@ -499,8 +499,8 @@ export const getStyleModalImg: GetStyleModalImg = ({ containerWidth: imgRect.width, hasScalableSrc, offset, - targetHeight: loadedImgEl.naturalHeight, - targetWidth: loadedImgEl.naturalWidth, + targetHeight: loadedImgEl?.naturalHeight || imgRect.height, + targetWidth: loadedImgEl?.naturalWidth || imgRect.width, }) : undefined diff --git a/stories/Img.stories.tsx b/stories/Img.stories.tsx index e06b0c49..0aa6f723 100644 --- a/stories/Img.stories.tsx +++ b/stories/Img.stories.tsx @@ -44,6 +44,7 @@ export const Regular = (props) => ( alt={imgThatWanakaTree.alt} src={imgThatWanakaTree.src} height="320" + decoding="async" loading="lazy" /> @@ -65,6 +66,7 @@ export const ZoomMargin = (props) => ( alt={imgThatWanakaTree.alt} src={imgThatWanakaTree.src} height="320" + decoding="async" loading="lazy" /> @@ -84,6 +86,7 @@ export const SmallPortrait = (props) => ( alt={imgTeAraiPoint.alt} src={imgTeAraiPoint.src} height="112" + decoding="async" loading="lazy" /> @@ -98,7 +101,13 @@ export const SVGSource = (props) => (

An image with an SVG src

- {imgNzMap.alt} + {imgNzMap.alt}
@@ -235,6 +244,7 @@ export const ModalFigureCaption = (props) => ( alt={imgThatWanakaTree.alt} src={imgThatWanakaTree.src} height="320" + decoding="async" loading="lazy" /> @@ -401,8 +411,8 @@ export const DelayedDisplayNone = (props) => { alt={imgTekapo.alt} src={imgTekapo.src} className={classImg} - decoding="async" height="320" + decoding="async" loading="lazy" /> @@ -442,8 +452,8 @@ export const InlineImage = (props) => ( {imgThatWanakaTree.alt} @@ -466,8 +476,8 @@ export const SwipeToUnzoomDisabled = (props) => ( {imgThatWanakaTree.alt} @@ -494,8 +504,8 @@ export const SwipeToUnzoomThreshold = (props) => ( {imgThatWanakaTree.alt}