介绍#

@astrojs/netlify 此适配器允许 Astro 将你的按需渲染路由及其功能部署到Netlify，包括服务器群岛，actions以及sessions。

借助 Netlify Image CDN，你可以在 不影响构建时间 的情况下按需转换图片。Netlify Image CDN 还可以优化您图片的大小和格式。以提高网站的运行性能和可靠性。

只有当你需要使用依赖服务器的 Netlify 功能（例如 Netlify 图像 CDN）时，才需要安装此适配器。
如果你仅将 Netlify 用作静态站点构建器，则无需安装。

安装#

Astro 提供了 astro add 命令，可自动配置官方集成：

1
pnpm astro add netlify

安装过程中，命令行会两次询问Continue?，输入 y 即可。安装成功后，你会看到类似以下的输出：

1
success  Added the following integration to your project:
2
- @astrojs/netlify

安装完成后，Astro 会自动修改你的 astro.config.mjs 配置文件以适配。

使用#

安装并配置好 @astrojs/netlify 适配器后，你的 Astro 项目就具备了使用 Netlify 图像 CDN 的能力。

Astro 本身具备开箱即用的图像优化功能。当你启用 @astrojs/netlify 适配器后，Astro 会自动将内置的 <Image /> 和 <Picture /> 组件的图像就会自动启用 Netlify 图像 CDN，无需手动操作。

如果你此前和我一样使用的是普通 <img> 标签，建议改用 <Image /> 组件。它不仅能自动优化图像，还能根据原始宽高比推断 width 和 height（针对 Astro 可处理的图像），从而有效避免累积布局偏移（CLS）。因此，优先使用 <Image /> 是最佳实践。

你只需像平常一样使用 Astro 的 <Image /> 组件，即可享受 Netlify 图像 CDN 提供的加速与优化服务，Astro 会自动处理参数拼接。

如果你使用的图片是来自其他域名比如第三方的图床，而不是与你的站点相同的域名上，你必须先配置授权该域名才能使用Netlify 图像 CDN，否则会显示未授权导致图片无法显示.

1
import { defineConfig } from 'astro/config';
2
import netlify from '@astrojs/netlify';
3

4
export default defineConfig({
5
  // ...
6
  adapter: netlify(),
7
  image: {
8
    domains: ['example.com'],
9
  },
10
});

结尾#

完成以上配置后，你的 Fuwari 博客里的图片路径应该就会变为类似.netlify/images?url=这样的格式了，目前我的博客头像的URL已经启用Netlify image CDN了，可以参考一下https://thw.lol/.netlify/images?url=_astro%2Favatar.Br1DRb7s.webp&w=360&h=360。