Next.js の画像に対してすべてのドメインを許可する

Next.js で、外部ドメインから画像を読み込むには、next.config.js での構成が必要です。すべてのドメインからの画像を許可するには、remotePatterns をワイルドカードとともに使用するか、unoptimized を使用して画像の最適化を完全に無効にします。

---

方法 1: ワイルドカードを使用した RemotePatterns の使用

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "*", // Allow images from all domains
      },
    ],
  },
};

export default nextConfig;

---

方法 2: 最適化されていないものを使用する

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  images: {
    unoptimized: true, // Disable image optimization
  },
};

export default nextConfig;

---

いつ使用するか:

• remotePatterns: 最適化された画像と柔軟性が必要な場合。
• 最適化されていない: 最適化されていないドメインの画像が必要な場合。

このアプローチは、動的な画像ソースを処理し、ドメイン制限を回避するのに役立ちます。 ?

つながろう?

• ギットハブ
• 中くらい
• リンクトイン

以上がNext.js の画像に対してすべてのドメインを許可するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。