create-react-appでlocalのbackgroundImageが表示されない時の対処法

背景

Reactのcreate-react-appを使って作業していました。ランディングページの上の方に背景画像をつけておしゃれにしようとして、cssのbackgroundImageでローカルの画像を表示しようとしたのですが、少しハマったので共有しておきます。

環境

react - 16.3.2

方法

localの画像をbackgroundImageで表示するには最初にimportをしなければなりません。

import foo from './hoge.jpg'

からの

const style = {backgroundImage:`url(${foo})`}

です。大事なのは

import './hoge.jpg'

のようにしてもimportされないこと。僕ははじめこのようにimportしていたのでずっと死んでいました。

おわりに

こんなことで記事を書くなと言われそうですが、とりあえずQiitaに投稿してみたかったので許してください。今度投稿する時はもっと面白い記事を書きます。