React - 이미지 출력

이미지 출력 <img>

• 방법 1 : import
  • src 안에 images 폴더 생성 후 이미지 저장
  • 이미지를 사용하는 컴포넌트에서 이미지 import
    • import imgApple from '../images/apple.png';
  • 이미지 출력
    • <img src={imgApple} ... />
• 방법 2 : public 내에 assets 폴더 만들고 그 안에 이미지 파일 저장
  • 이 방법은 import가 되지 않는다.
  • 이미지 출력
    • <img src='/assets/apple.png' />
• 방법 3 : state를 활용한 변수로의 이미지 출력
  • state 변수에 이미지를 저장하고 출력한다.

방법 1 : import - Image.js

import React, { Component } from 'react';
import imgApple from '../images/apple.png';
import imgBanana from '../images/banana.png';

class Image extends Component {
    render() {
        return (
            <div>
                <img src={imgApple} /> <br />
                <img src={imgBanana} />
            </div>
        );
    }
}

방법 2 : public 내에 assets 폴더 만들고 그 안에 이미지 파일 저장 - Image.js

import React, { Component } from 'react';

class Image extends Component {
    render() {
        return (
            <div>
                <img src="/assets/black.png" alt="black" /> 
                <img src="/assets/pink.png" alt="black" /> <br />
            </div>
        );
    }
}

방법 3 : state를 활용한 변수로의 이미지 출력 - Image.js

import React, { Component } from 'react';

import imgLizard from '../images/lizard.png';
import imgLizardon from '../images/lizardon.png';

class Image extends Component {
    state = {
        imgA : imgLizard,
        imgB : imgLizardon
    }
    render() {
        return (
            <div>
                <img src={this.state.imgA} alt="lizard" />
                <img src={this.state.imgB} alt="lizardon" /><br />
            </div>
        );
    }
}