📘

【React】画像を表示するパターン。

2022/12/24に公開

CSS

React

tech

概要

Reactで画像を参照する方法は通常のhtmlとは方法が違うので、忘備録としてメモ。
また、画像を参照してCSSで背景画像として設定する方法もメモ。

画像を表示する方法

publicフォルダにある画像を参照する

create-react-appでプロジェクトを作成するとpublicフォルダが作成されている。
publicフォルダ内に配置したどのようなファイルも、オンラインでアクセスできる。

例えば、publicフォルダにさらに画像だけのimagesフォルダを作成してpublic/images/dummy.jpgという画像が場合、ローカル環境（localhost）でReactを動かしているとき、画像は以下でアクセスすることができる。

 http://localhost:3000/images/dummy.jpg

実際にReactで画像を参照する場合は下記のようになる。
他にReactのPUBLIC＿URLを使用して画像を参照することもできる。

<img src="/images/dummy.jpg" />

/* PUBLIC＿URLを使用して画像を参照 */
<img src={`${process.env.PUBLIC_URL}/images.dummy.jpg`} />

PUBLIC＿URLを利用した場合は、絶対パスとなるが、ローカル環境で動かすときは相対パスのように見えるが本番環境にデプロイしたときに絶対パスとなる。

srcフォルダにある画像を参照する方法

今度はsrcフォルダにある画像を参照する方法。こちらはsrcフォルダ内にimagesフォルダを作成して、src/images/dummy.jpgを参照する場合。
ちなみにsrcフォルダで参照はできるが、publicフォルダは参照できないので注意

画像ファイルをimportとしてsrc属性に指定する。

import dummy from "./assets/images/dummy.jpg"
<img src={dummy} />

参照した画像をCSSで背景画像として表示する

参照した画像を表示させるならimgのタグのsrc属性に指定すればいいですが、CSSで背景画像を指定するのはちょっと癖があるのでメモ。

styleの書き方は下記の記事を参照

publicフォルダから参照した画像をstyle属性で指定する

publicフォルダの画像を背景画像として設定する場合は、style属性にそのままパスを設定するばいい。

<div style={{background:"url(/images/dummy.jpg)"}}></div>

srcフォルダから参照した画像をstyle属性で指定する

画像はsrcフォルダ内の画像を参照した例として、src/images/dummy.jpgを参照する場合。
ちなみに外部の画像を背景画像としたい場合はそのまま、URLを指定すればいい。

import dummy from "./assets/images/dummy.jpg"
{/* importした画像を背景画像にする */}
<div style={{background:`url(${dummy}) 0 0 no-repeat`}} ></div>
{/* 外部URLを参照した場合 */}
<div style={{background:"url(https://placehold.jp/150x150.png) 0 0 no-repeat"}} ></div>
{/* styleに複数指定したい場合はコンマ（,）で区切る */}
<div style={{background:"url(https://placehold.jp/150x150.png)",height:"200px"}} ></div>

CSSをオブジェクトとして宣言してstyle属性に指定する。

cssのプロパティをオブジェクトのように変数として宣言してそこにcssのプロパティを書いて、それをimgタグのsrc属性に指定する方法。

import dummy from "./assets/images/dummy.jpg"

const css_bg={
    "background":`url(${bgLine_Blue}) 0 0 no-repeat`,
    "backgroundSize":"contain",
    "height":"10vw"
  }
<img src={css_bg} />

CSSのカスタムプロパティを利用して外部CSSで設定する。

CSSにはカスタムプロパティとして変数を利用できるので、カスタムプロパティを利用して外部のCSS（page.module.css）で背景画像として表示してみた。

説明は後で。下記のように設定。

{/* 背景画像として利用するpage.module.css */}
import styles from '../styles/page.module.css'
{/* srcフォルダ内の画像を利用したい場合 */}
import dummyImg from "./assets/images/dummy.jpg"
{/* --image-url というカスタムプロパティを設定 */}
const bgImg = {
    '--image-url': `url(/images/dummy.jpg)`
}

const bgImgDummy = {
    '--image-url': `url(${dummyImg})`
}


{/* style属性にbgImgを指定 */}
<div style={bgImg} className={styles.setBg}>
<div style={bgImgDummy} className={styles.setBg}>

bgImgという任意の名前でオブジェクトを作る。
--image-urlというカスタムプロパティ名で今回は背景画像なので、url(/images//dummy.jpg)とし設定する。

bgImgを利用する要素のstyle属性に指定しておいて、classNameにbgImgに設定したカスタムプロパティを利用するクラス名（styles.setBG）を設定。

次はCSS側。

page.module.css

.setBG{
  background: var(--image-url) 0 0 no-repeat;
}

上記のようにvar()を利用して、cssProapertiesで指定した--image-urlを呼び出す。
これで表示できる。

分かりやすく？？Reactとか関係なしに記述すると下記のようになる。

.setBG--one{
 --image-url:url("/images/dummy_01.png")
}

.setBG--two{
 --image-url:url("/images/dummy_02.png")
}

.setBG{
  background: var(--image-url) 0 0 no-repeat;
}

<div class="setBG setBG--one"></div>
<div class="setBG setBG--two"></div>

CSSのカスタムプロパティについてはこちら

まとめ

取り急ぎ下記のサイトが参考になりました。

ReactはこれまでhtmlやCSSでの書き方に慣れてると戸惑うことが出てくる。
他にもstyled-compornentとかあるけど、なんかごちゃごちゃしてあまり好きではない。