사진이 보이지 않는 오류

사진을 넣으려면 <img> 태그에 src 속성을 통해 사진을 넣을 수 있다.

ES-Lint나 Prettier에도 오류로 잡히지도 않는데 위처럼 엑박이 뜨는 경우가 있을 것이다.

이를 해결하는 방법은 크게 2가지가 있다.

1. require 사용하기

<img src="../../../assets/noti.png" alt="notice" />

위는 일반적인 html에서는 동작하지만 react는 src로 포함하려면 public 디렉토리 안에 있는 요소만 포함하게 된다.

하지만 이전의 내용에서 리액트 폴더구조를 참조하면 public이 아닌 src의 asset에 넣는게 대표적이라고 하였다.

그러면 실제론 이미지가 assets에 있기에 포함할 수 없다.

그래서 react의 웹팩 번들러가 assets 안에 있는 사진까지 포함시킬 수 있도록 require 구문을 사용하는 것이다.

2. import 구문 사용하기

import React from 'react';
import myImage from './myImage.png';

const MyComponent = () => {
  return (
    <div>
      <img src={myImage} alt="My Image" />
    </div>
  );
}

export default MyComponent;

import 구문은 상대경로를 사용하기 때문에, public에 사진이 없어도 assets에 있는 사진을 포함 시킬 수 있다.

위처럼 상대경로를 사용하여 import from 을 시키면 사진을 표현할 수 있다.