[Next]Next.js에서 이미지 사용하기
Next에서 이미지를 사용하는건 여간 쉽지가 않다.
공식문서에는 다음과 같은 레퍼런스를 제공하고 있다.
이미지 컴포넌트 자체를 Next에서 제공해주고 있다.
뭔가 고마운거 같지만 써보면 참 그렇다.
일단은 Image 컴포넌트를 사용 시, src, width, height 속성이 필수불가결이다.
이 셋 중 하나가 빠지면 오류가 발생한다 ㅡㅡ...
서버에서 데이터를 받아와서 이미지를 뿌려줘야 하는데 정말 막막하다.
그래서 검색을 해보니 next-images라는 모듈이 있었다.
한줄기 빛이자 희망이었다.
먼저 모듈을 설치부터 하자!
설치 : npm i next-images
공식 문서에서 제공해준 config 설정을 적용해야 next에서 사용이 가능하다.
// next.config.js
const withImages = require('next-images')
module.exports = withImages({
webpack(config, options) {
return config
}
})
다음과 같이 config 설정을 완료 했으면 사용하면 된다!
기본 사용법은 다음과 같다.
export default () => <div>
<img src={require('./my-image.jpg')} />
</div>
OR
import img from './my-image.jpg'
export default () => <div>
<img src={img} />
</div>
하나는 src 속성에 직접 require해서 사용하는 방법이고
다른 하나는 이미지를 모듈처럼 import해서 src 속성에 변수로 때려 박는 방법이다.
내가 선택한 방법은 전자도 후자도 아니었다.
그냥 다음과 같이 변수로 때려 넣었다.
<div>
<img src={url} />
</div>
이외에도 이미지를 넣는 다양한 방법들이 있겠지만 next-images에 일단은 만족하며 마무리하겠다.
Author And Source
이 문제에 관하여([Next]Next.js에서 이미지 사용하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@zero_mountain/NextNext.js에서-이미지-사용하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)