React 에서 이미지가 불러와지지 않을 때 (엑박 뜰때)

# 문제점

 

메인 로고를 불러오려고 img 태그 속 src에 이미지 주소를 넣었다.

그런데 이미지는 불러와지지 않고, 깨진 파일처럼 떠있는 것이다.

 

alt로 대체된 채로 떠있는 이미지

import './App.css';

function App() {
  return (
    <div className="App">
      <header>
        <img src="assets/image/mainlogo(black).png" alt="main logo" class="main-logo" />
      </header>
    </div>
  );
}

실제 코드는 일반 html로는 잘 돌아간다.

 

# 해결법

 

import를 통해 불러오면 해결된다!

 

import './App.css';
import mainlogo from './assets/image/mainlogo(black).png';

function App() {
  return (
    <div className="App">
      <header>
        <img src={mainlogo} alt="main logo" class="main-logo" />
      </header>
    </div>
  );
}

export default App;

코드를 바꾼 후 제대로 뜬 이미지