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) => (