[Nextra] Nextra에서 이미지 파일 사용하기

Next.js 이미지

Next.js에서 이미지를 사용하는 표준 방법은 MDX 내부는 구성 요소를 직접 가져오는 것이다.

<Image src="/example.jpeg" alt="ERROR" width={500} height={500} />

 - 위와 같이 Next.js의 Image를 사용하면 레이아웃 이동이 없다.

 - 영상을 로드할 때 기본적으로 흐릿한 자리 표시자가 표시된다.

 - 크기(width와 height)를 정해줘야 한다.

 

정적 이미지

Nextra는 Markdown 구문을 사용하여 정적 이미지 가져오기를 자동으로 최적화한다.

이미지의 너비와 높이를 지정할 필요는 없으며![]() Markdown 구문을 사용하면 된다.

![Hello](/example.jpeg)

- 이렇게 하면 public 폴더 안에 example.jpeg 파일이 로드되고 Next.js의 <Image>로 자동 래핑된다.
- 공개를 통해 호스트하지 않으려면 를 사용하여 상대 경로에서 이미지를 로드할 수도 있다.