MB.js

Shumpei's Portfolio site

Next Imageについて確認する

fill属性をつける
Blur効果付与
src属性に直接URLを記述
src属性に直接URLを記述した場合はwidth / height / alt / priorityがないとエラー / wraningが出る

/_next/image?url=/images/dev/dark/doll-3.jpg&w=1080&q=75

importした画像
src属性にimportした画像パスを記述すると、width / heightを記述しなくてもエラーにならない

/_next/image?url=/_next/static/media/doll.063febda.jpeg&w=1920&q=75

src属性に直接URLを記述
style属性に width: 100%, height: auto を付与

/_next/image?url=/images/dev/dark/doll-3.jpg&w=1080&q=75

importした画像
style属性に width: 100%, height: auto を付与

/_next/image?url=/_next/static/media/doll.063febda.jpeg&w=1920&q=75

fill属性をつける
fill属性をつけると width height は記述しなくてもエラーにならない。imgタグに付与されるCSS⏬
position: absolute; height: 100%; width: 100%; inset: 0px; color: transparent;
ただし、親DOMでラップして高さを確保しないとheightが保てず0になり表示されないように見える。また h-300 などとすると縦横比が崩れる。そのため、Imageコンポーネントに objectFit: contain をつける。
fill属性をつける
同じ指定で objectFit: cover にした。
fill属性をつける
objectFit: contain の fill属性に、sizes=50vwをつける

たとえば grid を利用して画像を 2 列に表示している場合などに利用できます。この場合は画像の幅はブラウザ幅いっぱいに表示させる必要がないため大きな画像が必要ありません。2 列に設定を行っているため画像のサイズもブラウザ幅の半分である方が最適な画像になります。そのため sizes で 50vw を設定してブラウザ幅の半分の画像がダウンロードできるように設定しています。
引用：https://reffect.co.jp/nextjs/nextjs-image/#sizes-%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6

last update: 2023/10/21