画像一覧表示画面の作成 #25
画像一覧表示画面の作成 #25
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
next.config.js
Outdated
| @@ -2,6 +2,6 @@ module.exports = { | |||
| // Your existing module.exports | |||
| reactStrictMode: true, | |||
| images: { | |||
| domains: [""], | |||
| domains: ["hacku-kosen-2022-backend-id432d3htq-an.a.run.app", "via.placeholder.com"], | |||
There was a problem hiding this comment.
https://nextjs.org/docs/api-reference/next/image#domains
僕もそこまでNext.js詳しくないので公式から引っ張ってきただけなんだけど、
images: {
domains: ["..."],
}で指定するよりも
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'example.com',
port: '',
pathname: '/account123/**',
},
],
},で指定してあげた方がいいみたい。domainsによる指定だとportとかまで指定できないからみたいなニュアンスっぽい。
There was a problem hiding this comment.
これは別に対応mustではないかなというお気持ち（この開発スケジュール的には）
There was a problem hiding this comment.
vercel/next.js#36783
via.placeholder.com はdomainのみを追加してほしいらしい
本番用の画像urlは下の書き方がいいと思った!
src/projects/ImageMessagesPage.tsx
Outdated
| @@ -1,6 +1,8 @@ | |||
| import Link from "next/link"; | |||
| import { useRouter } from "next/router"; | |||
| import Image from "next/legacy/image"; | |||
There was a problem hiding this comment.
Starting with Next.js 13, the next/image component was rewritten to improve both the performance and developer experience. In order to provide a backwards compatible upgrade solution, the old next/image was renamed to next/legacy/image.
https://nextjs.org/docs/api-reference/next/legacy/image
legacyっぽい。
There was a problem hiding this comment.
これもmustで対応するやつではない気がする（開発スケジュール的な話で）
There was a problem hiding this comment.
[MSW] Warning: captured a request without a matching request handler:
• GET https://via.placeholder.com/150
If you still wish to intercept this unhandled request, please create a request handler for it.
Read more: https://mswjs.io/docs/getting-started/mocks
upstream image response failed for https://via.placeholder.com/150 403
こっちでは上手く表示できてない...
たぶんnext.config.jsのdomain周りだろうなあとは思っている...
いや、mswとの噛み合わせかな？
|
|
|
next/legacy/image の部分修正しといた! |
概要
画像表示画面の作成
画面（スクリーンショット）
スマホバージョン
タブレットバージョン
レビュー時に見てほしいところ
あたりを中心に見てほしいです.