Netlify Image CDN 400 Error with Remote Images with NuxtImage

Support
1

Netlify Image CDN 400 Error with Remote Images

Current Configuration

// nuxt.config.ts
image: {
  provider: 'netlify',
  dir: 'public',
  domains: [
    'bf.inverizo.com',
    'https://bf.inverizo.com/',
    'https://bf.inverizo.com/storage/',
    'https://bf.inverizo.com/storage/products/',
  ],
  alias: {
    storage: 'https://bf.inverizo.com/storage',
    products: 'https://bf.inverizo.com/storage/products',
  },
}

Issue Description

I’m experiencing 400 errors when trying to load remote images through Netlify Image CDN. The images are hosted on bf.inverizo.com and are being served from paths like /storage/products/.... While static images in the public directory work fine, remote images consistently return 400 errors.

Usage Examples

<!-- Working: Static image from public directory -->
<NuxtImg
  src="/images/logo.png"
  alt="Logo"
/>

<!-- Not Working: Remote image -->
<NuxtImg
  src="https://bf.inverizo.com/storage/products/list_image_656/01JNZJYE3D683ECYCP18P5DWYM.jpg"
  alt="Product Image"
/>

<!-- Not Working: Using alias -->
<NuxtImg
  src="/products/list_image_656/01JNZJYE3D683ECYCP18P5DWYM.jpg"
  alt="Product Image"
/>

Error Details

  • Image URL example: https://bf.inverizo.com/storage/products/list_image_656/01JNZJYE3D683ECYCP18P5DWYM.jpg
  • Generated Netlify Image CDN URL: /.netlify/images?w=10&h=10&q=50&blur=3&url=https%2F%2Fbf.inverizo.com%2Fstorage%2Fproducts%2Flist_image_656%2F01JNZJYE3D683ECYCP18P5DWYM.jpg
  • Error: 400 Bad Request

What I’ve Tried

  1. Different domain configurations in nuxt.config.ts:
    • Using full URLs with paths
    • Using just the domain
    • Using regex patterns
  2. Using different URL formats in the image source
  3. Checking if the remote images are accessible directly (they are)
  4. Using both direct URLs and aliases
  5. Verifying that static images in the public directory work correctly

Environment

  • Nuxt 3
  • Netlify Image CDN
  • Deployed on Netlify
  • Local development using Netlify CLI

Additional Context

  • The images work fine locally
  • The issue only occurs in production
  • Static images (from public directory) work correctly
  • Remote images are publicly accessible
  • Both direct URLs and aliases fail with the same 400 error
  • The issue seems to be specific to remote image handling in production

Expected Behavior

  • Static images from public directory should work (✓ working)
  • Remote images should be optimized and served through Netlify Image CDN (✗ failing)
  • Both direct URLs and aliases should work for remote images (✗ failing)

Any help or guidance would be greatly appreciated!

2

** Fixing Netlify Image CDN 400 Error with Remote Images in Nuxt Image**

Hey everyone,

This issue where Netlify Image CDN returned a 400 Bad Request error for remote images when using the Nuxt Image module. After troubleshooting, I found a solution that worked.

Solution

1. Update netlify.toml to Allow Remote Images

To ensure Netlify correctly fetches remote images, add the following section to your netlify.toml file:

[build]
command = "pnpm build"
publish = "apps/store/dist"
functions = "apps/store/.netlify/functions-internal"

[images]
    remote_images = ["https://bf.inverizo.com/.*"]

The [images] section allows Netlify to accept remote images from the specified domain. Without this, Netlify Image CDN will block external sources, resulting in a 400 error.

2. Nuxt Image Module Provider Issue

Currently, when using the Netlify provider in the Nuxt Image module, the domains array specified in nuxt.config.ts is not automatically passed to Netlify’s configuration.

Example:

export default defineNuxtConfig({
  image: {
    provider: "netlify",
    netlify: {
      domains: ["bf.inverizo.com"]
    }
  }
});

Even if you define domains here, Netlify does not recognize them unless they are manually added in netlify.toml.

Suggested Fix for Nuxt Image

The Nuxt Image module should automatically extract the domains from nuxt.config.ts and apply them to the [images] remote_images section in Netlify’s configuration. This would prevent developers from needing to configure both separately.

I hope this helps! Let me know if you have any questions or if you found an alternative approach. :rocket: