React.js2022.05.28

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

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

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

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 Image from './image-1.png';

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

export default Header