# Netlify Image CDN 400 Error with Remote Images with NuxtImage

**URL:** <https://answers.netlify.com/t/netlify-image-cdn-400-error-with-remote-images-with-nuxtimage/142346>\
**Category:** Support\
**Tags:** nuxt\
**Created:** [March 18, 2025, 12:39pm UTC](https://answers.netlify.com/t/netlify-image-cdn-400-error-with-remote-images-with-nuxtimage/142346 "2025-03-18T12:39:22Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![ABB65](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/abb65/32/58909_2.png) [@ABB65](https://answers.netlify.com/u/ABB65)\
**Post date:** [March 18, 2025, 12:39pm UTC](https://answers.netlify.com/t/netlify-image-cdn-400-error-with-remote-images-with-nuxtimage/142346/1 "2025-03-18T12:39:22Z")

</div>

# Netlify Image CDN 400 Error with Remote Images

## Current Configuration

```typescript
// 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

```vue
<!-- 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!

---

<div class="post-metadata">

**Author:** ![ABB65](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/abb65/32/58909_2.png) [@ABB65](https://answers.netlify.com/u/ABB65)\
**Post date:** [March 19, 2025, 4:34pm UTC](https://answers.netlify.com/t/netlify-image-cdn-400-error-with-remote-images-with-nuxtimage/142346/2 "2025-03-19T16:34:17Z")

</div>

\*\* 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:

```toml
[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:

```ts
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. 🚀