将 Cloudinary 添加到 Gatsby JavaScript

Cloudinary 是一个强大的图像和视频存储和处理云服务，它提供了快速、灵活、可扩展的图像处理解决方案。Gatsby 是一个静态网站生成器，它使构建响应式、高效、安全的静态网站变得轻松。本文将介绍如何将 Cloudinary 添加到 Gatsby JavaScript 中，以实现更高效的图像处理和管理。

准备工作

首先，你需要拥有一个 Cloudinary 账户。如果你还没有注册，请先注册一个。

安装依赖

首先，我们需要安装 gatsby-plugin-cloudinary 和 cloudinary-core 依赖。

npm install gatsby-plugin-cloudinary cloudinary-core --save

添加插件

打开 gatsby-config.js，并在 plugins 数组中添加 gatsby-plugin-cloudinary 插件。

module.exports = {
  plugins: [
    {
      resolve: "gatsby-plugin-cloudinary",
      options: {
        cloudName: "YOUR_CLOUD_NAME",
        apiKey: "YOUR_API_KEY",
        apiSecret: "YOUR_API_SECRET",
        secure: true,
      },
    },
  ],
}

将 YOUR_CLOUD_NAME、YOUR_API_KEY 和 YOUR_API_SECRET 替换为你的 Cloudinary 密钥。

使用 Cloudinary

通过在 GraphQL 查询中使用 cloudinaryImage，你可以轻松管理 Cloudinary 图像。例如，以下查询将返回属于 my-folder 文件夹下的所有图像：

query MyQuery {
  allCloudinaryAsset(filter: { folder: { eq: "my-folder" } }) {
    nodes {
      public_id
      secure_url
    }
  }
}

结论

在本文中，我们介绍了如何将 Cloudinary 添加到 Gatsby JavaScript 中，以实现更高效的图像处理和管理。通过使用 gatsby-plugin-cloudinary 插件和 GraphQL 查询，你可以轻松地将 Cloudinary 集成到你的 Gatsby 项目中，使你的网站更具有吸引力和性能。