Reactプロジェクトで背景画像を表示する際に迷いました。
imgタグでの表示やCSSでの表示など色々あるようなので、メモしました。
imgタグで画像を表示する方法
画像のパスをインポートして表示します。下記ではmvSPです。
imgタグのsrcに{mvSP}とプレースホルダーで指定し画像を表示できます。
import React from 'react';
import mvSP from '../../assets/images/mv/mv_sp.webp';
const ImageExample = () => {
return (
<div>
{/* imgタグで直接表示 */}
<div className="mt-8">
<img src={mvSP} alt="Example" className="w-full" />
</div>
</div>
);
};
export default ImageExample;CSS「background-image」で画像を表示
次にCSSファイルで画像を使う方法。まずはサンプルコードから。
import { CSSProperties } from 'react';
import { default as mvPC } from '../../assets/images/mv/mv_pc.webp';
import { default as mvSP } from '../../assets/images/mv/mv_sp.webp';
import './styles.scss';
//CSSプロパティを定義
interface CustomCSSProperties extends CSSProperties {
'--image-PC'?: string;
'--image-SP'?: string;
}
const Mv = () => {
//具体的な画像のパスを指定
const bgImg: CustomCSSProperties = {
'--image-PC': `url(${mvPC})`,
'--image-SP': `url(${mvSP})`,
};
return (
<div>
<div className="mvImage" style={bgImg}>
<picture>
<source srcSet={mvSP} media="(max-width: 768px)" type="image/webp" />
<img src={mvSP} alt="Sample Image" />
</picture>
</div>
</div>
);
};
export default Mv;TypeScriptのインターフェイスでCSSプロパティを定義し、画像のパスをプレースホルダーで指定。SampleではスマホとPC用の画像を「bgImg」定数に設定しています。
そして設定した「bgImg」を使いたいクラス名の記述されたタグにstyle属性を記述します。
<div className="mvImage" style={bgImg}>scssファイルで画像のパスを使えるようになりました。
styles.scssで記述は下記です。このようにしてbackground-imageで画像を表示できます。
.mvImage {
position: relative;
&::before {
content: "";
position: absolute;
left: 0%;
height: 100%;
width: 100%;
background-image: var(--image-PC);//画像を表示
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
}
}