nextjs config_error ai_generated true

Error: Image optimization for URL '...' failed because the protocol is not allowed. Only 'https:' is supported.

ID: nextjs/invalid-image-optimization-url-protocol

Also available as: JSON · Markdown · 中文
88%Fix Rate
90%Confidence
1Evidence
2024-01-05First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
[email protected] active — — —
[email protected] active — — —
[email protected] active — — —

Root Cause

The next/image component or Image API is trying to optimize an image with an http:// URL, but Next.js only allows https:// URLs by default for security reasons.

generic

中文

next/image 组件或 Image API 尝试使用 http:// URL 优化图像，但出于安全原因，Next.js 默认只允许 https:// URL。

Official Documentation

https://nextjs.org/docs/messages/invalid-image-optimization-url-protocol

Workarounds

  1. 90% success Add the dangerousAllowingHttp option to next.config.js to allow http:// URLs. Use with caution. 
    Add the dangerousAllowingHttp option to next.config.js to allow http:// URLs. Use with caution.
  2. 95% success If you control the image source, migrate to https:// using a CDN or SSL certificate. 
    If you control the image source, migrate to https:// using a CDN or SSL certificate.
  3. 80% success Use a proxy or rewrite in next.config.js to serve http images through an https endpoint. 
    Use a proxy or rewrite in next.config.js to serve http images through an https endpoint.

中文步骤

  1. 在 next.config.js 中添加 dangerousAllowingHttp 选项以允许 http:// URL。请谨慎使用。
  2. 如果您控制图像源，请使用 CDN 或 SSL 证书迁移到 https://。
  3. 在 next.config.js 中使用代理或重写，通过 https 端点提供 http 图像。

Dead Ends

Common approaches that don't work:

  1. 80% fail

    If the image server does not support https, the image will not load.

  2. 70% fail

    This removes all optimization benefits and may increase page load times.

  3. 85% fail

    The protocol check is separate from the hostname check; you need to explicitly allow http.