정적 파일 관리 (Public 폴더)
•
디렉토리에 파일과 이름이 같은 정적 파일이 있으면 pages/오류가 발생하므로 주의.
•
public 폴더를 접근하는 방법
1.
src=”/images/clothes.jpg”
2.
import jeans from "public/images/jeans.jpg"
src 정적 사용
•
import Image from 'next/image'; → VsCode 가 간혹 자동 임포트를 못하는 경우가 생김.
src에 사용할 이미지를 import를 통해 부를 경우
•
[필수]src
•
[선택]alt
•
[선택]width
•
[선택]height
•
[선택] priority : 가장 우선순위가 높은 이미지를 먼저 다운받도록 함. [boolean, default-false]
// 예시
import jeans from 'public/images/jeans.jpg'
<Image src={jeans} alt="청바지" />
JavaScript
복사
src 동적 사용
src에 사용할 이미지를 직접 입력한 경우
•
[필수]src
•
[선택]alt
•
[필수]width
•
[필수]height
•
[선택] priority : 가장 우선순위가 높은 이미지를 먼저 다운받도록 함. [boolean, default-false]
<Image src="/images/jeans.jpg" alt="청바지" width="300" height="300"/>
JavaScript
복사
•
만약 외부 URL인 경우 next.config.js 에 등록해야함.
// 예시
const nextConfig = {
images: {
remotePatterns: [
{
protocol: "https",
hostname: "nextjs.org", // 도메인
},
],
},
};
module.exports = nextConfig;
JavaScript
복사