Next.js의 이미지에 대해 모든 도메인 허용

Next.js에서 외부 도메인에서 이미지를 로드하려면 next.config.js에서 구성해야 합니다. 와일드카드와 함께 remotePatterns를 사용하거나 unoptimized를 사용하여 이미지 최적화를 완전히 비활성화하여 모든 도메인의 이미지를 허용할 수 있습니다.

방법 1: 와일드카드와 함께 원격 패턴 사용

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: 최적화된 이미지와 유연성을 원하는 경우
• 최적화되지 않음: 최적화되지 않은 모든 도메인의 이미지가 필요한 경우.

이 접근 방식은 동적 이미지 소스를 처리하고 도메인 제한을 우회하는 데 도움이 됩니다. ?

연결해 볼까요?

• Github
• 중간
• 링크드인

위 내용은 Next.js의 이미지에 대해 모든 도메인 허용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!