More than 5 years have passed since last update.

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

Last updated at 2018-05-23Posted at 2018-05-23

#背景
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に投稿してみたかったので許してください。今度投稿する時はもっと面白い記事を書きます。