Skip to content

Commit 5ce1c13

Browse files
james-elicxygcaicn
andauthored
refactor(image): introduce util function for image props (#707)
* feat(image): introduce resolveImageSource function to streamline image prop handling Added a new utility function, resolveImageSource, to consolidate the logic for resolving image source properties (src, width, height, blurDataURL) in the Image component and getImageProps. This change enhances code maintainability and ensures consistent behavior across components. * tweak --------- Co-authored-by: Jachin <ygcaicn@gmail.com>
1 parent b71ccd2 commit 5ce1c13

File tree

1 file changed

+30
-11
lines changed

1 file changed

+30
-11
lines changed

packages/vinext/src/shims/image.tsx

Lines changed: 30 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -152,6 +152,24 @@ function isRemoteUrl(src: string): boolean {
152152
return src.startsWith("http://") || src.startsWith("https://") || src.startsWith("//");
153153
}
154154

155+
/**
156+
* Resolve src, width, height, blurDataURL from Image props (string or StaticImageData).
157+
* Shared by the Image component and getImageProps to keep behavior in sync.
158+
*/
159+
function resolveImageSource(v: {
160+
src: string | StaticImageData;
161+
width?: number;
162+
height?: number;
163+
blurDataURL?: string;
164+
}): { src: string; width?: number; height?: number; blurDataURL?: string } {
165+
const src = typeof v.src === "string" ? v.src : v.src.src;
166+
const imgWidth = v.width ?? (typeof v.src === "object" ? v.src.width : undefined);
167+
const imgHeight = v.height ?? (typeof v.src === "object" ? v.src.height : undefined);
168+
const imgBlurDataURL =
169+
v.blurDataURL ?? (typeof v.src === "object" ? v.src.blurDataURL : undefined);
170+
return { src, width: imgWidth, height: imgHeight, blurDataURL: imgBlurDataURL };
171+
}
172+
155173
/**
156174
* Responsive image widths matching Next.js's device sizes config.
157175
* These are the breakpoints used for srcSet generation.
@@ -217,12 +235,12 @@ const Image = forwardRef<HTMLImageElement, ImageProps>(function Image(
217235
}
218236
: onLoad;
219237

220-
// Handle StaticImageData (import result)
221-
const src = typeof srcProp === "string" ? srcProp : srcProp.src;
222-
const imgWidth = width ?? (typeof srcProp === "object" ? srcProp.width : undefined);
223-
const imgHeight = height ?? (typeof srcProp === "object" ? srcProp.height : undefined);
224-
const imgBlurDataURL =
225-
blurDataURL ?? (typeof srcProp === "object" ? srcProp.blurDataURL : undefined);
238+
const {
239+
src,
240+
width: imgWidth,
241+
height: imgHeight,
242+
blurDataURL: imgBlurDataURL,
243+
} = resolveImageSource({ src: srcProp, width, height, blurDataURL });
226244

227245
// If a custom loader is provided, use basic img with loader URL
228246
if (loader) {
@@ -421,11 +439,12 @@ export function getImageProps(props: ImageProps): {
421439
...rest
422440
} = props;
423441

424-
const src = typeof srcProp === "string" ? srcProp : srcProp.src;
425-
const imgWidth = width ?? (typeof srcProp === "object" ? srcProp.width : undefined);
426-
const imgHeight = height ?? (typeof srcProp === "object" ? srcProp.height : undefined);
427-
const imgBlurDataURL =
428-
blurDataURLProp ?? (typeof srcProp === "object" ? srcProp.blurDataURL : undefined);
442+
const {
443+
src,
444+
width: imgWidth,
445+
height: imgHeight,
446+
blurDataURL: imgBlurDataURL,
447+
} = resolveImageSource({ src: srcProp, width, height, blurDataURL: blurDataURLProp });
429448

430449
// Validate remote URLs against configured patterns
431450
let blockedInProd = false;

0 commit comments

Comments
 (0)