next/legacy/image
画像の表示を最適化するNext.jsのComponent
propsがいくつか削除された
layout
objectFit
objectPosition
images.comaings
外部Domainの画像を最適化する場合は事前にdomainを設定しておく
Next.jsのpublicディレクトリにある画像は不要
セキュリティ的に良くないのかなmrsekut.icon
追加したら再起動しないといけない
してないとこんなエラーが出る
code:error
Unhandled Runtime Error
Error: Invalid src prop (https://hogehoge.com/.jpg) on next/image, hostname "hogehoge.com" is not configured under images in your next.config.js styled-componentsでwrapすると型が消える
height/widthを指定しなくてもエラーが出ない..
こうすればいけた
code:ts
const BannerImage = styled(Image)<ImageProps>
「実際に表示しているサイズよりも大きなサイズのデータが欲しい」とき、どうすればいいか？
実際に表示しているサイズが50pxで、実際に取得するデータも50pxにすると、画像が荒くなってしまう
なので、取得するデータは150pxで、styleで50px表示、とかにしたい
内部で、最適化ロジックでやっていること
該当コード
参考
どういう問題を解決するか、一つ一つのpropsの説明、生成されるHTMLについてなど
){kind=link}