vercel/next.js · error · ImageError

"url" parameter is valid but image type is not allowed

Error message

"url" parameter is valid but image type is not allowed

What it means

Thrown by imageOptimizer when the fetched content is detected as image/svg but the Next.js config has images.dangerouslyAllowSVG set to false (the default). SVGs are disabled by default because they can carry XSS/script payloads; the optimizer refuses them unless explicitly allowed.

Source

Thrown at packages/next/src/server/image-optimizer.ts:1106

      Log.error(
        "The requested resource isn't a valid image for",
        href,
        'received',
        upstreamType
      )
    }
    throw new ImageError(400, "The requested resource isn't a valid image.")
  }
  if (
    upstreamType.startsWith('image/svg') &&
    !nextConfig.images.dangerouslyAllowSVG
  ) {
    if (!opts.silent) {
      Log.error(
        `The requested resource "${href}" has type "${upstreamType}" but dangerouslyAllowSVG is disabled. Consider adding the "unoptimized" property to the <Image>.`
      )
    }
    throw new ImageError(
      400,
      '"url" parameter is valid but image type is not allowed'
    )
  }
  if (ANIMATABLE_TYPES.includes(upstreamType) && isAnimated(upstreamBuffer)) {
    if (!opts.silent) {
      Log.warnOnce(
        `The requested resource "${href}" is an animated image so it will not be optimized. Consider adding the "unoptimized" property to the <Image>.`
      )
    }
    return {
      buffer: upstreamBuffer,
      contentType: upstreamType,
      maxAge,
      etag: upstreamEtag,
      upstreamEtag,
    }
  }

View on GitHub (pinned to 0ae8c72462)

Solutions

1. If you trust the SVG source, enable it in next.config.js: images: { dangerouslyAllowSVG: true } and add a Content-Security-Policy for safety.
2. Prefer rasterizing the SVG to PNG/WebP, or render SVGs with a normal <img>/inline instead of next/image.
3. Add the `unoptimized` prop to the specific <Image> to bypass the optimizer for that SVG.
4. Add allowed SVG domains via images.remotePatterns and keep dangerouslyAllowSVG scoped to trusted origins.

Example fix

// before: SVG refused by default
// next.config.js
module.exports = {}

// after: explicitly allow with a CSP guard
module.exports = {
  images: {
    dangerouslyAllowSVG: true,
    contentDispositionType: 'attachment',
    contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
  },
}

// At config time, decide explicitly
const ALLOW_SVG = process.env.ALLOW_SVG === 'true'
module.exports = { images: { dangerouslyAllowSVG: ALLOW_SVG } }

function isAllowedImageType(type: string, allowSvg: boolean): boolean {
  if (type.startsWith('image/svg')) return allowSvg
  return type.startsWith('image/')
}

try {
  return await optimize(...)
} catch (e) {
  if (e instanceof ImageError && e.message.includes('image type is not allowed')) {
    return originalSvgBytes() // serve unoptimized SVG
  }
}

When it happens

Trigger: An <Image> points to an .svg file (internal or external) and the project's next.config.js does not enable dangerouslyAllowSVG: true.

Common situations: Using SVG logos/icons through next/image without reading the security implications, or a CDN that serves an SVG for a requested .png URL.

Related errors

• Specified images.remotePatterns must have protocol "http" or
• Next.js has blocked a javascript: URL as a security precauti
• `forbidden()` is experimental and only allowed to be enabled
• `unauthorized()` is experimental and only allowed to be used
• NEXT_EXPORT_ERROR

AI-assisted analysis of vercel/next.js@0ae8c72462 (2026-08-06). Data as JSON: /api/errors/8713979782999fd3. Report an issue: GitHub.