Astro 遠端圖片怎麼設白名單：用 domains 與 remotePatterns 縮小來源範圍

先確認你需要的是顯示，還是 Astro 最佳化#

一般 <img> 或 Markdown 圖片可使用完整遠端 URL；但若要讓 Astro 對遠端來源進行圖片最佳化，需要在設定中授權該來源。即使來源沒有被最佳化，使用 <Image /> 仍可透過明確尺寸協助避免 Cumulative Layout Shift；這兩件事不要混為一談。

固定來源用 domains#

如果文章封面只會來自同一個可信任 CDN host，可採最小清單：

1
export default defineConfig({
2
  image: {
3
    domains: ['images.example-cdn.com'],
4
  },
5
});

這個設定表達的是「這個 host 的遠端圖可以交給 Astro 處理」，不是讓所有外部 URL 都變成可信資料。新增另一個 CMS 前，應重新確認它的實際 image host，而不是把主網域或萬用子網域直接放大。

需要限制 protocol 或路徑時用 remotePatterns#

當同一個 host 同時承載可控與不可控內容，或只想允許 HTTPS，使用 pattern 比列網域更清楚：

1
export default defineConfig({
2
  image: {
3
    remotePatterns: [
4
      {
5
        protocol: 'https',
6
        hostname: 'images.example-cdn.com',
7
        pathname: '/posts/**',
8
      },
9
    ],
10
  },
11
});

官方範例也可只以 protocol: 'https' 限制，但那是很寬的規則，適合的情況遠少於已知 CDN host。若圖片 URL 是使用者可輸入或由第三方資料帶入，應先在應用程式端驗證來源；Astro 的設定是額外防線，不是內容審核器。

建置前後檢查三件事#

1. 列出實際圖片 URL，確認 host、協定與路徑都符合設定。
2. 執行 pnpm build，讓內容集合與圖片處理在正式建置中被驗證。
3. 在頁面確認圖片尺寸或 <Image /> 的 width／height 資訊，避免圖片載入後才推動版面。

若你是在維護文章 sitemap，也應把圖片來源設定和內容發布流程一起覆核；但它和 URL 是否該送進搜尋引擎是不同問題，可另參考 Astro Sitemap 的 noindex 與 filter 設定。

參考資料：

Astro Docs：Images