SSR / Dynamic — Remote Images

By default the middleware only serves images found under your browserDistFolder. To optimize external URLs, declare an explicit allowlist via remotePatterns — this prevents your server from becoming an open proxy.

Server configuration

app.use('/_ng/image', imageOptimizerHandler(browserDistFolder, {
  remotePatterns: [
    {
      protocol: 'https',
      hostname: 'cdn.example.com',
      pathname: '/assets/**',
    },
  ],
}));

Template usage

Pass the full HTTPS URL as ngSrc. The loader encodes it into the optimizer query string; the server fetches and processes it if the host matches a pattern.

<img
  ngSrc="https://cdn.example.com/assets/photo.jpg"
  width="1200"
  height="800"
  alt="CDN photo"
/>