36 lines
845 B
JavaScript
36 lines
845 B
JavaScript
export function ResponsiveImage({
|
|
src,
|
|
alt,
|
|
className,
|
|
eager = false,
|
|
}) {
|
|
if (!src) {
|
|
return (
|
|
<div
|
|
role="img"
|
|
aria-label={alt}
|
|
className={`grid place-items-center bg-paper text-sm text-muted ${className ?? ""}`}
|
|
>
|
|
Нет изображения
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const sized = (width) => (src.includes("w=") ? src.replace(/w=\d+/, `w=${width}`) : src);
|
|
|
|
return (
|
|
<img
|
|
src={sized(900)}
|
|
srcSet={`${sized(480)} 480w, ${sized(900)} 900w, ${sized(1400)} 1400w`}
|
|
sizes={eager ? "(max-width: 48rem) 100vw, 60vw" : "auto, (max-width: 48rem) 100vw, 40vw"}
|
|
loading={eager ? "eager" : "lazy"}
|
|
fetchPriority={eager ? "high" : "auto"}
|
|
decoding="async"
|
|
width="1400"
|
|
height="900"
|
|
alt={alt}
|
|
className={className}
|
|
/>
|
|
);
|
|
}
|