[Next] 정적 이미지 사용하기

안녕하세요. J4J입니다.

 

이번 포스팅은 정적 이미지 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다.

 

 

 

정적 이미지 사용하는 방법

 

[ 1. public 폴더 생성 ]

 

root 경로에 다음과 같이 public 폴더를 생성해줍니다.

 

public 폴더 생성

 

 

 

[ 2. images 폴더 생성 ]

 

만들어진 public 폴더 하위 경로에 다음과 같이 images 폴더를 생성해줍니다.

 

images 폴더 생성

 

 

 

여기서 만들어지는 images 폴더는 파일 이름을 달리 네이밍해도 무방합니다.

 

그리고 만들어진 폴더 내부에 이미지를 넣어놨습니다.

 

 

반응형

 

 

[ 3. 이미지 사용 파일 ]

 

img태그의 src에서는 public 폴더 내부에 있는 경로를 /를 통해 접근할 수 있습니다.

 

그러므로 위와 같이 폴더를 생성해뒀다면 img태그의 src에 "/images/friends.png"를 경로로 넣어주면 됩니다.

 

import * as React from 'react';
import { NextPage } from 'next';

const Index: NextPage = () => {
    return (
        <>
            <div>
                <h2>카카오 프렌즈 이미지</h2>
                <img src="/images/friends.png" />
            </div>
        </>
    );
};

export default Index;

 

 

 

 

 

 

 

이상으로 정적 이미지 사용하는 방법에 대해 간단하게 알아보는 시간이었습니다.

 

읽어주셔서 감사합니다.