【React】makeStylesでの画像の使い方

はじめに

Reactで背景に画像を埋め込もうとした際、/publicに画像を置いておけませんでした。
ローカルでは動くんですが、デプロイしたら読み込めなくなったんですよね。
ということで解決方法について述べようと思います。

解決法

• /src 以下に画像を配置し、import文で読み込む。
• 画像をurl関数を用いて背景画像に指定する

サンプルコード

上手く行った例

画像を/src/assetsに配置

styles.ts

import {makeStyles, Theme} from '@material-ui/core';
import Background from '../assets/background.jpg';

export const useStyles = makeStyles((theme: Theme) => ({
  background: {
    backgroundImage: `url(${Background})`,
  },
}));

ローカルでは動くが、デプロイしたサーバーで動かなかった例

画像を/publicに配置

styles.ts

import {makeStyles, Theme} from '@material-ui/core';
import Background from '../assets/background.jpg';

export const useStyles = makeStyles((theme: Theme) => ({
  background: {
    backgroundImage: 'url("../public/background.jpg")',
  },
}));

まとめ

Backgroundとしてimportして、url関数を用いるのが案外盲点だった。