잠시만 기다려 주세요.
Image 컴포넌트의 기본 반응형 이미지 부재 문제를 해결하기 위해, 수동으로 widths 및 sizes 속성을 정의하거나 astro.config.mjs의 experimental responsive images 플래그와 image.experimental.layout: 'constrained' 설정을 통해 자동으로 다양한 크기의 이미지를 생성하고 로드할 수 있습니다. 🖼️Unpic 이미지 서비스를 통합할 수 있습니다. Unpic은 srcset 자동 생성, CDN 감지 및 빌드 없는 이미지 크기 조정, 그리고 dominant color, blur hash, low-quality image placeholder와 같은 다양한 플레이스홀더 옵션을 제공하여 사용자 경험을 크게 향상시킵니다. ⏳Astro Cloudinary 패키지는 이미지 최적화, 실시간 변환(크롭, 리사이즈, 배경 교체, 생성형 AI), 업로드 위젯, 소셜 카드 자동 생성 등 강력한 기능을 Astro 프로젝트에 통합할 수 있게 합니다. 🚀Unpic은 Astro의 기본 Image 컴포넌트와 함께 사용하거나 자체 Unpic Image 컴포넌트를 사용하여 추가적인 스타일링(max-width, height, aspect-ratio) 및 플레이스홀더 기능을 활용할 수 있으며, 원격 이미지에 대한 플레이스홀더를 Base64 인코딩된 저품질 이미지로 직접 삽입하여 즉각적인 시각적 피드백을 제공합니다. ✨Astro Cloudinary 패키지는 단순한 CDN 링크 제공을 넘어, 이미지 최적화, 다양한 변환(색상 변경, 자르기, 크기 조정, 배경 교체), 생성형 AI 기반 이미지 처리, 업로드 위젯, OG 이미지 자동 생성 등 S-tier 수준의 기능을 Astro 프로젝트에 통합하여 이미지 관리의 효율성을 극대화합니다. ☁️astro.config.mjs의 image 객체에 도메인 인증을 추가해야 하며, 사용 시 를 설정하고, 사용 시 파일에 을 명시해야 합니다. 의 컴포넌트는 를 지원하지 않으므로 와 를 명시해야 합니다. ⚙️Unpicimage.serviceCloudinary.envCLOUDINARY_CLOUD_NAMEUnpicImageinfer sizewidthheightRecommanded Videos
2025. 10. 8.
2025. 5. 25.
2024. 8. 19.
2026. 1. 9.
2025. 7. 10.
2025. 3. 27.