Gatsby项目中使用外部图片的预处理技巧-CSDN博客

Gatsby项目中使用外部图片的预处理技巧

gatsby The best React-based framework with performance, scalability and security built in. 项目地址: https://gitcode.com/gh_mirrors/ga/gatsby

在构建现代网站时，图片处理是一个关键的性能优化点。Gatsby项目提供了强大的图片处理能力，但默认情况下这些优化仅适用于本地存储的图片文件。本文将详细介绍如何在Gatsby项目中预处理外部图片资源，使其也能享受Gatsby的图片优化功能。

为什么需要预处理外部图片

Gatsby通过sharp库提供了自动化的图片处理功能，包括：

响应式图片生成
懒加载支持
图片格式优化
尺寸调整

这些功能默认只对项目目录中的本地图片文件有效。当我们需要使用托管在第三方平台（如Unsplash、Imgur或CDN）上的图片时，就需要特殊的处理方式。

实现原理

Gatsby通过gatsby-source-filesystem插件提供的createRemoteFileNodeAPI，可以将远程图片"下载"到本地构建过程中，使其成为Gatsby文件系统的一部分。这样，远程图片就能像本地图片一样享受所有优化功能。

具体实现步骤

1. 定义内容模型

首先，我们需要在Markdown文件的frontmatter中定义图片相关字段：

---
title: 我的第一篇博客
featuredImgUrl: https://example.com/image.jpg
featuredImgAlt: 图片描述文字
---

2. 配置gatsby-node.js

在项目的gatsby-node.js文件中，我们需要做两件事：

2.1 定义GraphQL类型

使用Schema Customization API明确定义内容类型：

exports.createSchemaCustomization = ({ actions }) => {
  const { createTypes } = actions

  createTypes(`
    type MarkdownRemark implements Node {
      frontmatter: Frontmatter
      featuredImg: File @link(from: "fields.localFile")
    }

    type Frontmatter {
      title: String!
      featuredImgUrl: String
      featuredImgAlt: String
    }
  `)
}

2.2 创建远程文件节点

exports.onCreateNode = async ({
  node,
  actions: { createNode, createNodeField },
  createNodeId,
  getCache,
}) => {
  if (
    node.internal.type === "MarkdownRemark" &&
    node.frontmatter.featuredImgUrl
  ) {
    const fileNode = await createRemoteFileNode({
      url: node.frontmatter.featuredImgUrl,
      parentNodeId: node.id,
      createNode,
      createNodeId,
      getCache,
    })

    if (fileNode) {
      createNodeField({ 
        node, 
        name: "localFile", 
        value: fileNode.id 
      })
    }
  }
}

3. 在模板中使用优化后的图片

处理完成后，我们就可以在模板组件中使用这些图片了：

import React from "react"
import { GatsbyImage } from "gatsby-plugin-image"
import { graphql } from "gatsby"

const BlogPostTemplate = ({ data }) => {
  const post = data.markdownRemark
  
  return (
    <article>
      <h1>{post.frontmatter.title}</h1>
      {post.featuredImg && (
        <GatsbyImage
          image={post.featuredImg.childImageSharp.gatsbyImageData}
          alt={post.frontmatter.featuredImgAlt}
        />
      )}
      <div dangerouslySetInnerHTML={{ __html: post.html }} />
    </article>
  )
}

export const query = graphql`
  query($slug: String) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      frontmatter {
        title
        featuredImgAlt
      }
      html
      featuredImg {
        childImageSharp {
          gatsbyImageData(width: 800, layout: CONSTRAINED)
        }
      }
    }
  }
`

export default BlogPostTemplate