데브허브 | DEVHUB | How to Add Images to Your Blog Content in SanityHow to Add Images to Your Blog Content in Sanity
- Sanity Portable Text는 기본적으로 이미지 블록을 지원하지 않아 수동 설정이 필요합니다. 🚫
- Sanity Studio에서 이미지 삽입을 활성화하려면 콘텐츠 스키마의
fields 배열에 type: 'image'를 추가해야 합니다. 🖼️
- Sanity 레코드에서 이미지 URL을 생성하여 렌더링하려면
sanity-image-url 패키지가 필수적입니다. 📦
sanity-image-url 빌더를 Sanity 클라이언트와 연결하고 이미지 URL을 생성하는 헬퍼 함수(예: URLforImage.ts)를 생성해야 합니다. 🛠️
- 이미지 렌더링을 처리하고 노드에서
asset 및 alt 데이터를 추출하는 전용 컴포넌트(예: PortableTextImage.astro)를 만듭니다. ⚙️
- 성능 향상을 위해
format('webp') 메서드를 사용하여 이미지를 webp 형식으로 변환하고, 지원하지 않는 브라우저를 위한 대체 이미지 태그를 구현하여 이미지 최적화를 적용합니다. 🚀
- 사용자 정의 이미지 컴포넌트를
PortableText 렌더러에 components prop을 통해 통합하여 image 타입을 사용자 정의 컴포넌트에 매핑합니다. 🔗
- Sanity Studio 내에서 Portable Text 콘텐츠의 이미지 순서를 쉽게 변경하고 교체할 수 있습니다. 🔄
- 캐싱된 데이터로 인해 새로 게시된 이미지 변경 사항을 프런트엔드에서 확인하려면 하드 새로고침이 필요할 수 있습니다. 💡