LoginSignup
3

More than 5 years have passed since last update.

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
3