strapi-nextgen-framework
Version:
Production-ready, type-safe framework bridging Strapi v4 CMS and Next.js 14+ App Router with automatic cache management, Error Boundaries, and SEO optimization
54 lines • 1.76 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
/**
* Strapi Image Component - Phase 4 Implementation
* Optimized image component with next/image integration
*/
import Image from 'next/image';
/**
* Optimized image component for Strapi media
*
* Features:
* - Automatic responsive image handling
* - Strapi image format support (thumbnail, small, medium, large)
* - next/image integration with automatic width/height
* - Fallback support for missing images
* - Alt text from Strapi alternativeText field
*
* @example
* ```tsx
* <StrapiImage
* data={page.attributes.hero.image}
* nextImageProps={{
* priority: true,
* className: 'rounded-lg',
* fill: true,
* }}
* />
* ```
*/
export function StrapiImage(props) {
const { data, nextImageProps, fallback } = props;
// Handle missing or invalid data
if (!data?.data?.attributes) {
if (fallback) {
return (_jsx(Image, { src: fallback, alt: "Fallback image", ...nextImageProps }));
}
if (process.env.NODE_ENV === 'development') {
console.warn('[StrapiImage] No image data provided');
}
return null;
}
const imageData = data.data.attributes;
// Extract image properties
const src = imageData.url;
const alt = imageData.alternativeText || imageData.name || '';
const width = imageData.width;
const height = imageData.height;
// If fill mode is used, don't pass width/height
if (nextImageProps?.fill) {
return (_jsx(Image, { src: src, alt: alt, ...nextImageProps }));
}
// Standard mode with width/height
return (_jsx(Image, { src: src, alt: alt, width: width, height: height, ...nextImageProps }));
}
//# sourceMappingURL=StrapiImage.js.map