CSS
JavaScript
reactjs
create-react-app

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

More than 1 year has passed since last update.


背景

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