669 lines
28 KiB
JavaScript
669 lines
28 KiB
JavaScript
"use client";
|
|
"use strict";
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
exports.default = void 0;
|
|
var _extends = require("@swc/helpers/lib/_extends.js").default;
|
|
var _interop_require_default = require("@swc/helpers/lib/_interop_require_default.js").default;
|
|
var _interop_require_wildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
|
|
var _object_without_properties_loose = require("@swc/helpers/lib/_object_without_properties_loose.js").default;
|
|
var _react = _interop_require_wildcard(require("react"));
|
|
var _head = _interop_require_default(require("../shared/lib/head"));
|
|
var _imageBlurSvg = require("../shared/lib/image-blur-svg");
|
|
var _imageConfig = require("../shared/lib/image-config");
|
|
var _imageConfigContext = require("../shared/lib/image-config-context");
|
|
var _warnOnce = require("../shared/lib/utils/warn-once");
|
|
var _imageLoader = _interop_require_default(require("next/dist/shared/lib/image-loader"));
|
|
|
|
const configEnv = process.env.__NEXT_IMAGE_OPTS;
|
|
const allImgs = new Map();
|
|
let perfObserver;
|
|
if (typeof window === 'undefined') {
|
|
globalThis.__NEXT_IMAGE_IMPORTED = true;
|
|
}
|
|
const VALID_LOADING_VALUES = [
|
|
'lazy',
|
|
'eager',
|
|
undefined
|
|
];
|
|
function isStaticRequire(src) {
|
|
return src.default !== undefined;
|
|
}
|
|
function isStaticImageData(src) {
|
|
return src.src !== undefined;
|
|
}
|
|
function isStaticImport(src) {
|
|
return typeof src === 'object' && (isStaticRequire(src) || isStaticImageData(src));
|
|
}
|
|
function getWidths({ deviceSizes , allSizes }, width, sizes) {
|
|
if (sizes) {
|
|
// Find all the "vw" percent sizes used in the sizes prop
|
|
const viewportWidthRe = /(^|\s)(1?\d?\d)vw/g;
|
|
const percentSizes = [];
|
|
for(let match; match = viewportWidthRe.exec(sizes); match){
|
|
percentSizes.push(parseInt(match[2]));
|
|
}
|
|
if (percentSizes.length) {
|
|
const smallestRatio = Math.min(...percentSizes) * 0.01;
|
|
return {
|
|
widths: allSizes.filter((s)=>s >= deviceSizes[0] * smallestRatio),
|
|
kind: 'w'
|
|
};
|
|
}
|
|
return {
|
|
widths: allSizes,
|
|
kind: 'w'
|
|
};
|
|
}
|
|
if (typeof width !== 'number') {
|
|
return {
|
|
widths: deviceSizes,
|
|
kind: 'w'
|
|
};
|
|
}
|
|
const widths = [
|
|
...new Set(// > This means that most OLED screens that say they are 3x resolution,
|
|
// > are actually 3x in the green color, but only 1.5x in the red and
|
|
// > blue colors. Showing a 3x resolution image in the app vs a 2x
|
|
// > resolution image will be visually the same, though the 3x image
|
|
// > takes significantly more data. Even true 3x resolution screens are
|
|
// > wasteful as the human eye cannot see that level of detail without
|
|
// > something like a magnifying glass.
|
|
// https://blog.twitter.com/engineering/en_us/topics/infrastructure/2019/capping-image-fidelity-on-ultra-high-resolution-devices.html
|
|
[
|
|
width,
|
|
width * 2 /*, width * 3*/
|
|
].map((w)=>allSizes.find((p)=>p >= w) || allSizes[allSizes.length - 1])),
|
|
];
|
|
return {
|
|
widths,
|
|
kind: 'x'
|
|
};
|
|
}
|
|
function generateImgAttrs({ config , src , unoptimized , width , quality , sizes , loader }) {
|
|
if (unoptimized) {
|
|
return {
|
|
src,
|
|
srcSet: undefined,
|
|
sizes: undefined
|
|
};
|
|
}
|
|
const { widths , kind } = getWidths(config, width, sizes);
|
|
const last = widths.length - 1;
|
|
return {
|
|
sizes: !sizes && kind === 'w' ? '100vw' : sizes,
|
|
srcSet: widths.map((w, i)=>`${loader({
|
|
config,
|
|
src,
|
|
quality,
|
|
width: w
|
|
})} ${kind === 'w' ? w : i + 1}${kind}`).join(', '),
|
|
// It's intended to keep `src` the last attribute because React updates
|
|
// attributes in order. If we keep `src` the first one, Safari will
|
|
// immediately start to fetch `src`, before `sizes` and `srcSet` are even
|
|
// updated by React. That causes multiple unnecessary requests if `srcSet`
|
|
// and `sizes` are defined.
|
|
// This bug cannot be reproduced in Chrome or Firefox.
|
|
src: loader({
|
|
config,
|
|
src,
|
|
quality,
|
|
width: widths[last]
|
|
})
|
|
};
|
|
}
|
|
function getInt(x) {
|
|
if (typeof x === 'number' || typeof x === 'undefined') {
|
|
return x;
|
|
}
|
|
if (typeof x === 'string' && /^[0-9]+$/.test(x)) {
|
|
return parseInt(x, 10);
|
|
}
|
|
return NaN;
|
|
}
|
|
// See https://stackoverflow.com/q/39777833/266535 for why we use this ref
|
|
// handler instead of the img's onLoad attribute.
|
|
function handleLoading(img, src, placeholder, onLoadRef, onLoadingCompleteRef, setBlurComplete, unoptimized) {
|
|
if (!img || img['data-loaded-src'] === src) {
|
|
return;
|
|
}
|
|
img['data-loaded-src'] = src;
|
|
const p = 'decode' in img ? img.decode() : Promise.resolve();
|
|
p.catch(()=>{}).then(()=>{
|
|
if (!img.parentNode) {
|
|
// Exit early in case of race condition:
|
|
// - onload() is called
|
|
// - decode() is called but incomplete
|
|
// - unmount is called
|
|
// - decode() completes
|
|
return;
|
|
}
|
|
if (placeholder === 'blur') {
|
|
setBlurComplete(true);
|
|
}
|
|
if (onLoadRef == null ? void 0 : onLoadRef.current) {
|
|
// Since we don't have the SyntheticEvent here,
|
|
// we must create one with the same shape.
|
|
// See https://reactjs.org/docs/events.html
|
|
const event = new Event('load');
|
|
Object.defineProperty(event, 'target', {
|
|
writable: false,
|
|
value: img
|
|
});
|
|
let prevented = false;
|
|
let stopped = false;
|
|
onLoadRef.current(_extends({}, event, {
|
|
nativeEvent: event,
|
|
currentTarget: img,
|
|
target: img,
|
|
isDefaultPrevented: ()=>prevented,
|
|
isPropagationStopped: ()=>stopped,
|
|
persist: ()=>{},
|
|
preventDefault: ()=>{
|
|
prevented = true;
|
|
event.preventDefault();
|
|
},
|
|
stopPropagation: ()=>{
|
|
stopped = true;
|
|
event.stopPropagation();
|
|
}
|
|
}));
|
|
}
|
|
if (onLoadingCompleteRef == null ? void 0 : onLoadingCompleteRef.current) {
|
|
onLoadingCompleteRef.current(img);
|
|
}
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
if (img.getAttribute('data-nimg') === 'fill') {
|
|
if (!unoptimized && (!img.getAttribute('sizes') || img.getAttribute('sizes') === '100vw')) {
|
|
let widthViewportRatio = img.getBoundingClientRect().width / window.innerWidth;
|
|
if (widthViewportRatio < 0.6) {
|
|
(0, _warnOnce).warnOnce(`Image with src "${src}" has "fill" but is missing "sizes" prop. Please add it to improve page performance. Read more: https://nextjs.org/docs/api-reference/next/image#sizes`);
|
|
}
|
|
}
|
|
if (img.parentElement) {
|
|
const { position } = window.getComputedStyle(img.parentElement);
|
|
const valid = [
|
|
'absolute',
|
|
'fixed',
|
|
'relative'
|
|
];
|
|
if (!valid.includes(position)) {
|
|
(0, _warnOnce).warnOnce(`Image with src "${src}" has "fill" and parent element with invalid "position". Provided "${position}" should be one of ${valid.map(String).join(',')}.`);
|
|
}
|
|
}
|
|
if (img.height === 0) {
|
|
(0, _warnOnce).warnOnce(`Image with src "${src}" has "fill" and a height value of 0. This is likely because the parent element of the image has not been styled to have a set height.`);
|
|
}
|
|
}
|
|
const heightModified = img.height.toString() !== img.getAttribute('height');
|
|
const widthModified = img.width.toString() !== img.getAttribute('width');
|
|
if (heightModified && !widthModified || !heightModified && widthModified) {
|
|
(0, _warnOnce).warnOnce(`Image with src "${src}" has either width or height modified, but not the other. If you use CSS to change the size of your image, also include the styles 'width: "auto"' or 'height: "auto"' to maintain the aspect ratio.`);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
const ImageElement = /*#__PURE__*/ (0, _react).forwardRef((_param, forwardedRef)=>{
|
|
var { imgAttributes , heightInt , widthInt , qualityInt , className , imgStyle , blurStyle , isLazy , fill , placeholder , loading , srcString , config , unoptimized , loader , onLoadRef , onLoadingCompleteRef , setBlurComplete , setShowAltText , onLoad , onError } = _param, rest = _object_without_properties_loose(_param, [
|
|
"imgAttributes",
|
|
"heightInt",
|
|
"widthInt",
|
|
"qualityInt",
|
|
"className",
|
|
"imgStyle",
|
|
"blurStyle",
|
|
"isLazy",
|
|
"fill",
|
|
"placeholder",
|
|
"loading",
|
|
"srcString",
|
|
"config",
|
|
"unoptimized",
|
|
"loader",
|
|
"onLoadRef",
|
|
"onLoadingCompleteRef",
|
|
"setBlurComplete",
|
|
"setShowAltText",
|
|
"onLoad",
|
|
"onError"
|
|
]);
|
|
loading = isLazy ? 'lazy' : loading;
|
|
return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement("img", Object.assign({}, rest, imgAttributes, {
|
|
width: widthInt,
|
|
height: heightInt,
|
|
decoding: "async",
|
|
"data-nimg": fill ? 'fill' : '1',
|
|
className: className,
|
|
// @ts-ignore - TODO: upgrade to `@types/react@17`
|
|
loading: loading,
|
|
style: _extends({}, imgStyle, blurStyle),
|
|
ref: (0, _react).useCallback((img)=>{
|
|
if (forwardedRef) {
|
|
if (typeof forwardedRef === 'function') forwardedRef(img);
|
|
else if (typeof forwardedRef === 'object') {
|
|
// @ts-ignore - .current is read only it's usually assigned by react internally
|
|
forwardedRef.current = img;
|
|
}
|
|
}
|
|
if (!img) {
|
|
return;
|
|
}
|
|
if (onError) {
|
|
// If the image has an error before react hydrates, then the error is lost.
|
|
// The workaround is to wait until the image is mounted which is after hydration,
|
|
// then we set the src again to trigger the error handler (if there was an error).
|
|
// eslint-disable-next-line no-self-assign
|
|
img.src = img.src;
|
|
}
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
if (!srcString) {
|
|
console.error(`Image is missing required "src" property:`, img);
|
|
}
|
|
if (img.getAttribute('alt') === null) {
|
|
console.error(`Image is missing required "alt" property. Please add Alternative Text to describe the image for screen readers and search engines.`);
|
|
}
|
|
}
|
|
if (img.complete) {
|
|
handleLoading(img, srcString, placeholder, onLoadRef, onLoadingCompleteRef, setBlurComplete, unoptimized);
|
|
}
|
|
}, [
|
|
srcString,
|
|
placeholder,
|
|
onLoadRef,
|
|
onLoadingCompleteRef,
|
|
setBlurComplete,
|
|
onError,
|
|
unoptimized,
|
|
forwardedRef,
|
|
]),
|
|
onLoad: (event)=>{
|
|
const img = event.currentTarget;
|
|
handleLoading(img, srcString, placeholder, onLoadRef, onLoadingCompleteRef, setBlurComplete, unoptimized);
|
|
},
|
|
onError: (event)=>{
|
|
// if the real image fails to load, this will ensure "alt" is visible
|
|
setShowAltText(true);
|
|
if (placeholder === 'blur') {
|
|
// If the real image fails to load, this will still remove the placeholder.
|
|
setBlurComplete(true);
|
|
}
|
|
if (onError) {
|
|
onError(event);
|
|
}
|
|
}
|
|
})));
|
|
});
|
|
const Image = /*#__PURE__*/ (0, _react).forwardRef((_param, forwardedRef)=>{
|
|
var { src , sizes , unoptimized =false , priority =false , loading , className , quality , width , height , fill , style , onLoad , onLoadingComplete , placeholder ='empty' , blurDataURL , layout , objectFit , objectPosition , lazyBoundary , lazyRoot } = _param, all = _object_without_properties_loose(_param, [
|
|
"src",
|
|
"sizes",
|
|
"unoptimized",
|
|
"priority",
|
|
"loading",
|
|
"className",
|
|
"quality",
|
|
"width",
|
|
"height",
|
|
"fill",
|
|
"style",
|
|
"onLoad",
|
|
"onLoadingComplete",
|
|
"placeholder",
|
|
"blurDataURL",
|
|
"layout",
|
|
"objectFit",
|
|
"objectPosition",
|
|
"lazyBoundary",
|
|
"lazyRoot"
|
|
]);
|
|
const configContext = (0, _react).useContext(_imageConfigContext.ImageConfigContext);
|
|
const config = (0, _react).useMemo(()=>{
|
|
const c = configEnv || configContext || _imageConfig.imageConfigDefault;
|
|
const allSizes = [
|
|
...c.deviceSizes,
|
|
...c.imageSizes
|
|
].sort((a, b)=>a - b);
|
|
const deviceSizes = c.deviceSizes.sort((a, b)=>a - b);
|
|
return _extends({}, c, {
|
|
allSizes,
|
|
deviceSizes
|
|
});
|
|
}, [
|
|
configContext
|
|
]);
|
|
let rest = all;
|
|
let loader = rest.loader || _imageLoader.default;
|
|
// Remove property so it's not spread on <img> element
|
|
delete rest.loader;
|
|
// This special value indicates that the user
|
|
// didn't define a "loader" prop or "loader" config.
|
|
const isDefaultLoader = '__next_img_default' in loader;
|
|
if (isDefaultLoader) {
|
|
if (config.loader === 'custom') {
|
|
throw new Error(`Image with src "${src}" is missing "loader" prop.` + `\nRead more: https://nextjs.org/docs/messages/next-image-missing-loader`);
|
|
}
|
|
} else {
|
|
// The user defined a "loader" prop or config.
|
|
// Since the config object is internal only, we
|
|
// must not pass it to the user-defined "loader".
|
|
const customImageLoader = loader;
|
|
var _tmp;
|
|
_tmp = (obj)=>{
|
|
const { config: _ } = obj, opts = _object_without_properties_loose(obj, [
|
|
"config"
|
|
]);
|
|
return customImageLoader(opts);
|
|
}, loader = _tmp, _tmp;
|
|
}
|
|
if (layout) {
|
|
if (layout === 'fill') {
|
|
fill = true;
|
|
}
|
|
const layoutToStyle = {
|
|
intrinsic: {
|
|
maxWidth: '100%',
|
|
height: 'auto'
|
|
},
|
|
responsive: {
|
|
width: '100%',
|
|
height: 'auto'
|
|
}
|
|
};
|
|
const layoutToSizes = {
|
|
responsive: '100vw',
|
|
fill: '100vw'
|
|
};
|
|
const layoutStyle = layoutToStyle[layout];
|
|
if (layoutStyle) {
|
|
style = _extends({}, style, layoutStyle);
|
|
}
|
|
const layoutSizes = layoutToSizes[layout];
|
|
if (layoutSizes && !sizes) {
|
|
sizes = layoutSizes;
|
|
}
|
|
}
|
|
let staticSrc = '';
|
|
let widthInt = getInt(width);
|
|
let heightInt = getInt(height);
|
|
let blurWidth;
|
|
let blurHeight;
|
|
if (isStaticImport(src)) {
|
|
const staticImageData = isStaticRequire(src) ? src.default : src;
|
|
if (!staticImageData.src) {
|
|
throw new Error(`An object should only be passed to the image component src parameter if it comes from a static image import. It must include src. Received ${JSON.stringify(staticImageData)}`);
|
|
}
|
|
if (!staticImageData.height || !staticImageData.width) {
|
|
throw new Error(`An object should only be passed to the image component src parameter if it comes from a static image import. It must include height and width. Received ${JSON.stringify(staticImageData)}`);
|
|
}
|
|
blurWidth = staticImageData.blurWidth;
|
|
blurHeight = staticImageData.blurHeight;
|
|
blurDataURL = blurDataURL || staticImageData.blurDataURL;
|
|
staticSrc = staticImageData.src;
|
|
if (!fill) {
|
|
if (!widthInt && !heightInt) {
|
|
widthInt = staticImageData.width;
|
|
heightInt = staticImageData.height;
|
|
} else if (widthInt && !heightInt) {
|
|
const ratio = widthInt / staticImageData.width;
|
|
heightInt = Math.round(staticImageData.height * ratio);
|
|
} else if (!widthInt && heightInt) {
|
|
const ratio = heightInt / staticImageData.height;
|
|
widthInt = Math.round(staticImageData.width * ratio);
|
|
}
|
|
}
|
|
}
|
|
src = typeof src === 'string' ? src : staticSrc;
|
|
let isLazy = !priority && (loading === 'lazy' || typeof loading === 'undefined');
|
|
if (src.startsWith('data:') || src.startsWith('blob:')) {
|
|
// https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
|
|
unoptimized = true;
|
|
isLazy = false;
|
|
}
|
|
if (config.unoptimized) {
|
|
unoptimized = true;
|
|
}
|
|
if (isDefaultLoader && src.endsWith('.svg') && !config.dangerouslyAllowSVG) {
|
|
// Special case to make svg serve as-is to avoid proxying
|
|
// through the built-in Image Optimization API.
|
|
unoptimized = true;
|
|
}
|
|
const [blurComplete, setBlurComplete] = (0, _react).useState(false);
|
|
const [showAltText, setShowAltText] = (0, _react).useState(false);
|
|
const qualityInt = getInt(quality);
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
if (!src) {
|
|
// React doesn't show the stack trace and there's
|
|
// no `src` to help identify which image, so we
|
|
// instead console.error(ref) during mount.
|
|
unoptimized = true;
|
|
} else {
|
|
if (fill) {
|
|
if (width) {
|
|
throw new Error(`Image with src "${src}" has both "width" and "fill" properties. Only one should be used.`);
|
|
}
|
|
if (height) {
|
|
throw new Error(`Image with src "${src}" has both "height" and "fill" properties. Only one should be used.`);
|
|
}
|
|
if ((style == null ? void 0 : style.position) && style.position !== 'absolute') {
|
|
throw new Error(`Image with src "${src}" has both "fill" and "style.position" properties. Images with "fill" always use position absolute - it cannot be modified.`);
|
|
}
|
|
if ((style == null ? void 0 : style.width) && style.width !== '100%') {
|
|
throw new Error(`Image with src "${src}" has both "fill" and "style.width" properties. Images with "fill" always use width 100% - it cannot be modified.`);
|
|
}
|
|
if ((style == null ? void 0 : style.height) && style.height !== '100%') {
|
|
throw new Error(`Image with src "${src}" has both "fill" and "style.height" properties. Images with "fill" always use height 100% - it cannot be modified.`);
|
|
}
|
|
} else {
|
|
if (typeof widthInt === 'undefined') {
|
|
throw new Error(`Image with src "${src}" is missing required "width" property.`);
|
|
} else if (isNaN(widthInt)) {
|
|
throw new Error(`Image with src "${src}" has invalid "width" property. Expected a numeric value in pixels but received "${width}".`);
|
|
}
|
|
if (typeof heightInt === 'undefined') {
|
|
throw new Error(`Image with src "${src}" is missing required "height" property.`);
|
|
} else if (isNaN(heightInt)) {
|
|
throw new Error(`Image with src "${src}" has invalid "height" property. Expected a numeric value in pixels but received "${height}".`);
|
|
}
|
|
}
|
|
}
|
|
if (!VALID_LOADING_VALUES.includes(loading)) {
|
|
throw new Error(`Image with src "${src}" has invalid "loading" property. Provided "${loading}" should be one of ${VALID_LOADING_VALUES.map(String).join(',')}.`);
|
|
}
|
|
if (priority && loading === 'lazy') {
|
|
throw new Error(`Image with src "${src}" has both "priority" and "loading='lazy'" properties. Only one should be used.`);
|
|
}
|
|
if (placeholder === 'blur') {
|
|
if (widthInt && heightInt && widthInt * heightInt < 1600) {
|
|
(0, _warnOnce).warnOnce(`Image with src "${src}" is smaller than 40x40. Consider removing the "placeholder='blur'" property to improve performance.`);
|
|
}
|
|
if (!blurDataURL) {
|
|
const VALID_BLUR_EXT = [
|
|
'jpeg',
|
|
'png',
|
|
'webp',
|
|
'avif'
|
|
] // should match next-image-loader
|
|
;
|
|
throw new Error(`Image with src "${src}" has "placeholder='blur'" property but is missing the "blurDataURL" property.
|
|
Possible solutions:
|
|
- Add a "blurDataURL" property, the contents should be a small Data URL to represent the image
|
|
- Change the "src" property to a static import with one of the supported file types: ${VALID_BLUR_EXT.join(',')}
|
|
- Remove the "placeholder" property, effectively no blur effect
|
|
Read more: https://nextjs.org/docs/messages/placeholder-blur-data-url`);
|
|
}
|
|
}
|
|
if ('ref' in rest) {
|
|
(0, _warnOnce).warnOnce(`Image with src "${src}" is using unsupported "ref" property. Consider using the "onLoadingComplete" property instead.`);
|
|
}
|
|
if (!unoptimized && loader !== _imageLoader.default) {
|
|
const urlStr = loader({
|
|
config,
|
|
src,
|
|
width: widthInt || 400,
|
|
quality: qualityInt || 75
|
|
});
|
|
let url;
|
|
try {
|
|
url = new URL(urlStr);
|
|
} catch (err) {}
|
|
if (urlStr === src || url && url.pathname === src && !url.search) {
|
|
(0, _warnOnce).warnOnce(`Image with src "${src}" has a "loader" property that does not implement width. Please implement it or use the "unoptimized" property instead.` + `\nRead more: https://nextjs.org/docs/messages/next-image-missing-loader-width`);
|
|
}
|
|
}
|
|
for (const [legacyKey, legacyValue] of Object.entries({
|
|
layout,
|
|
objectFit,
|
|
objectPosition,
|
|
lazyBoundary,
|
|
lazyRoot
|
|
})){
|
|
if (legacyValue) {
|
|
(0, _warnOnce).warnOnce(`Image with src "${src}" has legacy prop "${legacyKey}". Did you forget to run the codemod?` + `\nRead more: https://nextjs.org/docs/messages/next-image-upgrade-to-13`);
|
|
}
|
|
}
|
|
if (typeof window !== 'undefined' && !perfObserver && window.PerformanceObserver) {
|
|
perfObserver = new PerformanceObserver((entryList)=>{
|
|
for (const entry of entryList.getEntries()){
|
|
var ref;
|
|
// @ts-ignore - missing "LargestContentfulPaint" class with "element" prop
|
|
const imgSrc = (entry == null ? void 0 : (ref = entry.element) == null ? void 0 : ref.src) || '';
|
|
const lcpImage = allImgs.get(imgSrc);
|
|
if (lcpImage && !lcpImage.priority && lcpImage.placeholder !== 'blur' && !lcpImage.src.startsWith('data:') && !lcpImage.src.startsWith('blob:')) {
|
|
// https://web.dev/lcp/#measure-lcp-in-javascript
|
|
(0, _warnOnce).warnOnce(`Image with src "${lcpImage.src}" was detected as the Largest Contentful Paint (LCP). Please add the "priority" property if this image is above the fold.` + `\nRead more: https://nextjs.org/docs/api-reference/next/image#priority`);
|
|
}
|
|
}
|
|
});
|
|
try {
|
|
perfObserver.observe({
|
|
type: 'largest-contentful-paint',
|
|
buffered: true
|
|
});
|
|
} catch (err) {
|
|
// Log error but don't crash the app
|
|
console.error(err);
|
|
}
|
|
}
|
|
}
|
|
const imgStyle = Object.assign(fill ? {
|
|
position: 'absolute',
|
|
height: '100%',
|
|
width: '100%',
|
|
left: 0,
|
|
top: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
objectFit,
|
|
objectPosition
|
|
} : {}, showAltText ? {} : {
|
|
color: 'transparent'
|
|
}, style);
|
|
const blurStyle = placeholder === 'blur' && blurDataURL && !blurComplete ? {
|
|
backgroundSize: imgStyle.objectFit || 'cover',
|
|
backgroundPosition: imgStyle.objectPosition || '50% 50%',
|
|
backgroundRepeat: 'no-repeat',
|
|
backgroundImage: `url("data:image/svg+xml;charset=utf-8,${(0, _imageBlurSvg).getImageBlurSvg({
|
|
widthInt,
|
|
heightInt,
|
|
blurWidth,
|
|
blurHeight,
|
|
blurDataURL
|
|
})}")`
|
|
} : {};
|
|
if (process.env.NODE_ENV === 'development') {
|
|
if (blurStyle.backgroundImage && (blurDataURL == null ? void 0 : blurDataURL.startsWith('/'))) {
|
|
// During `next dev`, we don't want to generate blur placeholders with webpack
|
|
// because it can delay starting the dev server. Instead, `next-image-loader.js`
|
|
// will inline a special url to lazily generate the blur placeholder at request time.
|
|
blurStyle.backgroundImage = `url("${blurDataURL}")`;
|
|
}
|
|
}
|
|
const imgAttributes = generateImgAttrs({
|
|
config,
|
|
src,
|
|
unoptimized,
|
|
width: widthInt,
|
|
quality: qualityInt,
|
|
sizes,
|
|
loader
|
|
});
|
|
let srcString = src;
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
if (typeof window !== 'undefined') {
|
|
let fullUrl;
|
|
try {
|
|
fullUrl = new URL(imgAttributes.src);
|
|
} catch (e) {
|
|
fullUrl = new URL(imgAttributes.src, window.location.href);
|
|
}
|
|
allImgs.set(fullUrl.href, {
|
|
src,
|
|
priority,
|
|
placeholder
|
|
});
|
|
}
|
|
}
|
|
const linkProps = {
|
|
// @ts-expect-error upgrade react types to react 18
|
|
imageSrcSet: imgAttributes.srcSet,
|
|
imageSizes: imgAttributes.sizes,
|
|
crossOrigin: rest.crossOrigin
|
|
};
|
|
const onLoadRef = (0, _react).useRef(onLoad);
|
|
(0, _react).useEffect(()=>{
|
|
onLoadRef.current = onLoad;
|
|
}, [
|
|
onLoad
|
|
]);
|
|
const onLoadingCompleteRef = (0, _react).useRef(onLoadingComplete);
|
|
(0, _react).useEffect(()=>{
|
|
onLoadingCompleteRef.current = onLoadingComplete;
|
|
}, [
|
|
onLoadingComplete
|
|
]);
|
|
const imgElementArgs = _extends({
|
|
isLazy,
|
|
imgAttributes,
|
|
heightInt,
|
|
widthInt,
|
|
qualityInt,
|
|
className,
|
|
imgStyle,
|
|
blurStyle,
|
|
loading,
|
|
config,
|
|
fill,
|
|
unoptimized,
|
|
placeholder,
|
|
loader,
|
|
srcString,
|
|
onLoadRef,
|
|
onLoadingCompleteRef,
|
|
setBlurComplete,
|
|
setShowAltText
|
|
}, rest);
|
|
return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement(ImageElement, Object.assign({}, imgElementArgs, {
|
|
ref: forwardedRef
|
|
})), priority ? // Note how we omit the `href` attribute, as it would only be relevant
|
|
// for browsers that do not support `imagesrcset`, and in those cases
|
|
// it would likely cause the incorrect image to be preloaded.
|
|
//
|
|
// https://html.spec.whatwg.org/multipage/semantics.html#attr-link-imagesrcset
|
|
/*#__PURE__*/ _react.default.createElement(_head.default, null, /*#__PURE__*/ _react.default.createElement("link", Object.assign({
|
|
key: '__nimg-' + imgAttributes.src + imgAttributes.srcSet + imgAttributes.sizes,
|
|
rel: "preload",
|
|
as: "image",
|
|
href: imgAttributes.srcSet ? undefined : imgAttributes.src
|
|
}, linkProps))) : null);
|
|
});
|
|
var _default = Image;
|
|
exports.default = _default;
|
|
|
|
if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
|
|
Object.defineProperty(exports.default, '__esModule', { value: true });
|
|
Object.assign(exports.default, exports);
|
|
module.exports = exports.default;
|
|
}
|
|
|
|
//# sourceMappingURL=image.js.map
|