microCMSの画像をリサイズはパラメーターを付与で簡単

2023-10-03

microCMSにアップロードした画像を使う場合は、画像のURLの後ろにパラメータを付与するだけで、簡単にリサイズした画像を取り出すことが可能です。

<img src={`${url}?fit=crop&crop=left,top&w=1200&h=800`} >

画像のURLにした変数を波カッコで囲んで、このような書き方をすると、HTML要素とコンポーネントの両方に値を渡せます。

切り抜きの方法などは、microCMSのページに紹介されている以外にも、imgixの公式リファレンスに、いろいろと載っています。現在はSVG形式については対応していないようなので、ご注意ください。