# next/image

muchogusto

모든 브라우저에서 잘 동작하는 lazy loading 을 구현하기 위해서는 Intersection Observer 혹은 scroll 이벤트를 통해 스크린에 element가 보일 때를 캐치하여 이미지를 로드하도록 구현해야 합니다(크롬 76 버전 이상부터는 img 태그에

pixartive

왜 next/Images는 v.13에서 더이상 objectFit을 필요로 하지 않게 된건지 생각해 보는 시간 가지기 ☺️

hsk10271

⚠️ 정리한 내용은 오타나 잘못된 정보가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다. 들어가기 전에 next/image 적용하기 전의 코드를 살펴보도록 하자.메인 페이지의 상품 사진들에 적용된 코드이다. 아래와 같이 chakra-ui 를 사용하면서 Image

kim98111

next/image의 Image 컴포넌트를 사용하여 이미지 최적화하는 방법에 대해서

dano

next/image는 NextJS에서 제공하는 Image 최적화 라이브러리입니다. NextJS의 프레임워크를 활용하여 다양한 기능을 쓰기 쉽게 제공하고 있는데, 공식 문서에서는 기본적인 기능과 사용법에 대해서만 설명하고 있습니다. 이 포스트에서는 공식 문서에서 설명해주

joy37

글을 쓰게된 계기 최근 next.js를 공부하면서 직접 구현해보며 깊이 이해한 부분이 있어 글로 남겨보고자 합니다. 아무래도 이미지를 화면에 출력하게 되는데 next.js에서는 이미지를 최적화시켜 주어 따로 처리하지 않아도 되도록 해줍니다 (이런 편리한 기능이 많기 때

devstone

Next.js 섹시하게 활용해보기

broccoliindb

hostnameImageImage 를 사용시에 hostname 관련 이슈가 발생시 해결법은 next.config.js에 해당 설정을 통해 아래와 같이 도메인을 등록해주면 된다. 아래 예는 github avatar 도메인과, 로컬테스트용 도메인인 localhost를 넣었