@vistagenic/vista 0.2.8 → 0.2.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/image/index.js +17 -4
- package/package.json +1 -1
package/dist/image/index.js
CHANGED
|
@@ -25,8 +25,9 @@ const wrapperStyle = {
|
|
|
25
25
|
overflow: 'hidden',
|
|
26
26
|
};
|
|
27
27
|
exports.Image = (0, react_1.forwardRef)((props, ref) => {
|
|
28
|
-
const { placeholder, blurDataURL, onLoadingComplete, priority, ...restProps } = props;
|
|
28
|
+
const { placeholder, blurDataURL, onLoadingComplete, onError, priority, ...restProps } = props;
|
|
29
29
|
const [isLoaded, setIsLoaded] = (0, react_1.useState)(false);
|
|
30
|
+
const [useDirectSrc, setUseDirectSrc] = (0, react_1.useState)(false);
|
|
30
31
|
// Combine refs
|
|
31
32
|
const setRefs = (0, react_1.useCallback)((node) => {
|
|
32
33
|
if (node && node.complete && node.naturalWidth > 0) {
|
|
@@ -50,19 +51,31 @@ exports.Image = (0, react_1.forwardRef)((props, ref) => {
|
|
|
50
51
|
});
|
|
51
52
|
}
|
|
52
53
|
}, [onLoadingComplete]);
|
|
54
|
+
const handleError = (0, react_1.useCallback)((event) => {
|
|
55
|
+
if (!useDirectSrc) {
|
|
56
|
+
// If optimizer endpoint fails (common on static hosts), fall back to raw src.
|
|
57
|
+
setUseDirectSrc(true);
|
|
58
|
+
}
|
|
59
|
+
if (typeof onError === 'function') {
|
|
60
|
+
onError(event);
|
|
61
|
+
}
|
|
62
|
+
}, [onError, useDirectSrc]);
|
|
53
63
|
// Get processed img props
|
|
54
|
-
const imgProps = (0, get_img_props_1.getImgProps)({ ...restProps, priority }, image_config_1.imageConfigDefault, image_loader_1.defaultLoader);
|
|
64
|
+
const imgProps = (0, get_img_props_1.getImgProps)({ ...restProps, priority, unoptimized: useDirectSrc || restProps.unoptimized }, image_config_1.imageConfigDefault, image_loader_1.defaultLoader);
|
|
65
|
+
const fallbackSrc = String(restProps.src || '');
|
|
66
|
+
const effectiveSrc = useDirectSrc ? fallbackSrc : imgProps.src;
|
|
67
|
+
const effectiveSrcSet = useDirectSrc ? undefined : imgProps.srcSet;
|
|
55
68
|
// Determine if we should show blur placeholder
|
|
56
69
|
const showBlur = placeholder === 'blur' && blurDataURL && !isLoaded;
|
|
57
70
|
const needsWrapper = showBlur;
|
|
58
71
|
// Render image element
|
|
59
|
-
const imageElement = ((0, jsx_runtime_1.jsx)("img", { ...imgProps, ref: setRefs, onLoad: handleLoad, style: {
|
|
72
|
+
const imageElement = ((0, jsx_runtime_1.jsx)("img", { ...imgProps, ref: setRefs, onLoad: handleLoad, onError: handleError, style: {
|
|
60
73
|
...imgProps.style,
|
|
61
74
|
...(showBlur ? {
|
|
62
75
|
opacity: isLoaded ? 1 : 0,
|
|
63
76
|
transition: 'opacity 0.5s ease-in-out'
|
|
64
77
|
} : {}),
|
|
65
|
-
}, src:
|
|
78
|
+
}, src: effectiveSrc, srcSet: effectiveSrcSet, decoding: priority ? 'sync' : 'async', fetchPriority: priority ? 'high' : undefined }));
|
|
66
79
|
// Wrap with blur placeholder if needed
|
|
67
80
|
if (needsWrapper) {
|
|
68
81
|
return ((0, jsx_runtime_1.jsxs)("span", { style: {
|