Fix: Remote Image Is Not Allowed in Astro

Astro shows “Remote image is not allowed” when you ask it to process an image from a domain your config doesn’t allow. Astro only optimises remote images from hosts you list, so a page can’t be used to make your build fetch arbitrary URLs. Add the domain to image.domains (or a pattern to image.remotePatterns) in astro.config.mjs. The hint offers a second option: remove inferSize for that image if you don’t need Astro to fetch it.

Key Takeaways

• Allow exact hosts with image.domains: ['images.example.com'].
• Allow groups of hosts or paths with image.remotePatterns.
• Wildcards in remotePatterns hostnames (**.cdn.example.com) cover subdomains.
• Restart the dev server after changing config.

Fix with image.domains

// astro.config.mjs
import { defineConfig } from 'astro/config';

export default defineConfig({
  image: {
    domains: ['images.example-cms.com'],
  },
});

Now this is processed:

---
import { Image } from 'astro:assets';
---
<Image
  src="https://images.example-cms.com/team.jpg"
  alt="The team"
  width={1200}
  height={800}
/>

Fix with remotePatterns

When a CMS serves images from several subdomains or you want to restrict paths:

export default defineConfig({
  image: {
    remotePatterns: [
      { protocol: 'https', hostname: '**.cms-cdn.example' },
      { protocol: 'https', hostname: 'assets.example.com', pathname: '/public/**' },
    ],
  },
});

* matches a single subdomain level; ** matches any depth. Be as specific as you can: allowing everything turns your build (or your server, with on-demand rendering) into a proxy for any image on the internet.

When you don’t need Astro to process it

If the CMS already serves resized, modern-format images through its own CDN, you can skip Astro’s processing and use a plain tag with the CMS’s resize parameters:

<img
  src={`${cover.url}?w=1200&fm=webp`}
  srcset={`${cover.url}?w=600&fm=webp 600w, ${cover.url}?w=1200&fm=webp 1200w`}
  sizes="(min-width: 768px) 768px, 100vw"
  width={cover.width}
  height={cover.height}
  alt={cover.alt}
  loading="lazy"
/>

No domain config is needed for plain <img> tags. This keeps builds fast for image-heavy CMS sites, a trade-off covered in the headless CMS guide.

Related errors

Remote images also need dimensions; see Missing image dimensions. For sizing and srcset with astro:assets, see responsive images in Astro. The configuration options are documented in the Astro images guide.

FAQ

Do I need image.domains for images in public/?

No. Paths starting with / that point at public/ aren’t remote. They aren’t optimised either; move them to src/ and import them for that.

Does image.domains affect plain img tags?

No. It only controls which remote images astro:assets (<Image />, <Picture />, getImage()) will fetch and process.