Next.jsがNext/imageから外部イメージをインポートできない問題(ドメインの設定、loaderの適用)

Next.jsで上のように開発したいです.json内の画像ファイル名が含まれており、サーバ内のリソースファイルにアクセスしてインポートする必要があります.

Next.js Un構成のホストの問題

On one of your pages that leverages the next/image component, you passed a src value that uses a hostname in the URL that isn't defined in the images.domains config in next.config.js.
簡単に書けば、私たちが使っているNext/imageは事前にnextをsrcのドメインに入れます.config.jsを定義する必要がある.静的ファイルへのアクセスは気にしませんが、外部サーバのイメージをインポートする必要があるため、ドメインを設定する必要があります.

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    domains: ["localhost", "*"],
  },
  reactStrictMode: true,
};

module.exports = nextConfig;

これでimagesのドメインを設定すれば良いのですが、一番上に設定しないとうまく認識できないのが問題です.だから必ず一番上にドメイン名を設定します.
このような過程を経なければ,srcアドレスを直接入れるにはloader()を用いる方法もある.
next/image Un-構成のホストコメントアドレス

でもやっぱりイメージがないんですよね…?

Same issue here, preventing us from upgrading to 10.1.x. Passing unoptimized={true} will allow images to render, but obviously turns off any worthwhile optimizations.
理由は次のjsは内蔵イメージコンポーネントと自動イメージ最適化をサポートするためです.したがって、対応する設定が設定されていても、コンソールで確認するとimgのsrcが少しおかしく表示されます.
だから、次は.jsを100%利用することはできませんが、以下の問題を解決できます.次の設定でunoptimized={true}が指定されている場合、最適化は行われません.

 <Image
              src={`http://localhost:8080/images/${fileName}`}
              alt="음식 사진"
              width="64"
              height="64"
              unoptimized={true}
            />

S 3のSigned imagesはnext/imageと併用されなくなりました

最適化なしでloaderを使用して画像をオフセットする方法

If you want to use a cloud provider to optimize images instead of using the Next.js built-in Image Optimization API, you can configure the loader and path prefix in your next.config.js file. This allows you to use relative URLs for the Image src and automatically generate the correct absolute URL for your provider.

module.exports = {
  images: {
    loader: 'imgix',
    path: 'https://example.com/myaccount/',
  },
}

これにより、ドメインのpathに直接アクセスして画像をインポートできます.