Heim >Web-Frontend >js-Tutorial >Alle Domänen für Bilder in Next.js zulassen

Alle Domänen für Bilder in Next.js zulassen

Barbara Streisand
Barbara StreisandOriginal
2024-12-21 13:33:17194Durchsuche

In Next.js erfordert das Laden von Bildern aus externen Domänen eine Konfiguration in next.config.js. Sie können Bilder aus allen Domänen zulassen, indem Sie entweder remotePatterns mit einem Platzhalter verwenden oder die Bildoptimierung mit unoptimized vollständig deaktivieren.

Allow All Domains for Images in Next.js


Methode 1: RemotePatterns mit Wildcard verwenden

import type { NextConfig } from "next";

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

export default nextConfig;

Methode 2: Nicht optimiert verwenden

import type { NextConfig } from "next";

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

export default nextConfig;

Wann zu verwenden:

  • remotePatterns: Wenn Sie optimierte Bilder und Flexibilität wünschen.
  • nicht optimiert: Wenn Sie Bilder von einer beliebigen Domain ohne Optimierung benötigen.

Dieser Ansatz hilft bei der Handhabung dynamischer Bildquellen und der Umgehung von Domänenbeschränkungen. ?

Lass uns verbinden?

  • Github
  • Medium
  • LinkedIn

Das obige ist der detaillierte Inhalt vonAlle Domänen für Bilder in Next.js zulassen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn