Autoriser tous les domaines pour les images dans Next.js

Dans Next.js, le chargement d'images à partir de domaines externes nécessite une configuration dans next.config.js. Vous pouvez autoriser les images de tous les domaines soit en utilisant RemotePatterns avec un caractère générique, soit en désactivant entièrement l'optimisation des images avec non optimisé.

---

Méthode 1 : Utiliser des modèles distants avec Wildcard

import type { NextConfig } from "next";

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

export default nextConfig;

---

Méthode 2 : Utilisation non optimisée

import type { NextConfig } from "next";

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

export default nextConfig;

---

Quand utiliser :

• remotePatterns : lorsque vous souhaitez des images optimisées et de la flexibilité.
• non optimisé : lorsque vous avez besoin d'images de n'importe quel domaine sans optimisation.

Cette approche permet de gérer les sources d'images dynamiques et de contourner les restrictions de domaine. ?

Connectons-nous ?

• GitHub
• Moyen
• LinkedIn

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!