【React.js】 画像を表示する

らーめん

React.jsで画像を表示してみる

publicディレクトリに置いてある画像を呼び出す場合

  • Header.jsx
import React from 'react';

function Header() {
  return <img src={`${process.env.PUBLIC_URL}/logo.png`} alt="Logo" />;
}

export default Header;

process.env.PUBLIC_URLには、publicディレクトリへのURLが入ってる

importして指定する場合

  • Header.jsx
import Image from './image-1.png';

function Header() {
  return <img src={Image} alt="Image" />;
}

export default Header