React で画像を取り扱う際、今までずっと <img> を使っていたのですが、環境によっては表示までに時間がかかるため、画像表示範囲がしばらく白かったり、読み込み完了後も画像の上部からズズズッ…と徐々に読み込まれるので、見た目があまり宜しくない状況でした。
ある程度は CSS で対応しようとしていたのですが、上手くいっているとはいいがたく…。
で、何かないか！と調べたところ、タイトルにも記載した「React Image」というライブラリを見つけました。
GitHub のページはこちらから。
GitHub – mbrevda/react-image: React.js
tag rendering with multiple fallback & loader support
https://github.com/mbrevda/react-image
実装方法ですが、まずはライブラリを下記のコマンドでインストールします。
npm install react-image --save
インストールが完了したら、下記のサンプルコードを参考に、表示したい画像のパス、読み込み中に表示したい要素、読み込み失敗時に表示したい要素をそれぞれ指定するだけです。
import React, { Component } from 'react';
import { Img } from 'react-image';
class ExamplePage extends Component {
render() {
return (
<Img src="[表示したい画像のパス]"
loader={[読み込み中に表示したい要素]}
unloader={[読み込み失敗時に表示したい要素]} />
);
}
}
export default ExamplePage;
読み込み中に表示したい要素と読み込み失敗時に表示したい要素は、<p> タグや <img> など、基本的には何でも大丈夫です。
こちらを実行すれば、画像を表示するときに読み込み中の要素が表示され、更に画像の読み込み完了後は、読み込み中の要素から、表示したい画像にパッと一瞬で置き換わります。
なお、Chrome の検証ツールで確認したところ、表示している要素自体はごく普通の <img> だったので、CSSで調整することも可能です。
ただ、<Img> 内に className や id を指定しても反映されないようでしたので、特定の id やclassName を指定した <div> 要素などで <Img> を囲い、それに対して CSS で高さや幅などを指定すると良さそうです。
サンプルコードは下記のとおりです。
<div className="react-img">
<Img src="[表示したい画像のパス]"
loader={[読み込み中に表示したい要素]}
unloader={[読み込み失敗時に表示したい要素]} />
</div>
.react-img img {
width: 100px;
height: 100px;
margin: 10px;
}
上記のように記述したところ、無事 CSS が反映されました。
className や CSS の内容については、適宜変更してください。
ちなみに、class や id は指定できませんでしたが、onClick で画像をタップした時の処理については指定できました。
以上、React で画像を表示するときに、画像の読み込み中・読み込み失敗時の表示を指定できるライブラリ「React Image」のご紹介でした。
本当に便利でしたので、React でたくさんの画像を取り扱う際は、インストール必須と言っても過言ではないかもしれません。
少なくとも、私は今後開発する React のプロジェクトには導入すると思います。
ご参考になれば幸いです。
