問題タブ [nextjs-image]

次のように、新しい next/image コンポーネントを使用して、digitaloceanspaces からアバター画像をロードしています。

ローダーは次のようになります。

しかし、それはキャッシュしていません。そして、それを next.config に追加してみます

しかし、何も機能していません。リモートの URL から画像をキャッシュする方法を教えてもらえますか?

Create React App からアプリを Next.js に変換しています。

Next.js は AWS からイメージをロードする必要がありますが、これは起こりません。なんで？

数日前に機能しました。キャッシングの問題か何かだと思いますか？

何かアイデアはありますか？

Next.js では、アプリは次のローカル URL から画像を読み込みます。

http://localhost:3000/_next/image?url=https%3A%2F%2Fticket-t01.s3.eu-central-1.amazonaws.com%2Fob8h_0.cover.jpg&w=1200&q=100

next.config.js:

1 画像タグ:

React では、AWS やイメージの読み込みに問題はありませんでした。

編集

イメージにアクセスしようとしたときの console.log:

Next.js とImageコンポーネントを使用しています。私の問題は、ウィンドウのサイズを変更すると、画像が中央に表示されないことです。

私はmargin autoを試し、コンテンツを正当化してflexを表示し、コンテンツを中央に揃え、オブジェクトに合わせて、オブジェクトの位置を揃えました。

Imageまた、コンポーネントのすべてのレイアウト オプションを試しました。

より大きなウィンドウにサイズ変更すると、画像の上部がトリミングされます。または、高さは同じままですが、幅が広くなり、プロポーションが維持されません。

（コードを画像に簡略化しました）

CSS: