gatsbyjs 图像清晰 - Shell-Bash (1)

📌 相关文章

📜 gatsbyjs 图像清晰 - Shell-Bash (1)

📅 最后修改于: 2023-12-03 15:30:52.871000 🧑 作者: Mango

GatsbyJS 图像清晰 - Shell-Bash

GatsbyJS 是一个快速的 React 应用程序生成器，它可以构建高度优化的静态网站。在 GatsbyJS 中，使用图像需要特别关注图像的清晰度，在本文中，我们将介绍如何在 GatsbyJS 程序中使用图像，并保证它们的清晰度。

1. 安装

安装 gatsby-image 和 gatsby-plugin-sharp 插件：

npm install gatsby-image gatsby-plugin-sharp

2. 使用

将图像路径作为 FluildObject 参数传递给 gatsby-image，它将会自动处理图像的清晰度。

import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"

export default ({ data }) => (
  <div>
    <h1>My Photos</h1>
    {data.allFile.edges.map(({ node }) => (
      <div key={node.id}>
        <h2>{node.name}</h2>
        <Img fluid={node.childImageSharp.fluid} />
      </div>
    ))}
  </div>
)

export const query = graphql`
  query {
    allFile(filter: { sourceInstanceName: { eq: "photos" } }) {
      edges {
        node {
          id
          name
          childImageSharp {
            fluid(maxWidth: 800) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }
`

3. 结论

gatsby-image 和 gatsby-plugin-sharp 插件可以轻松地处理图像的清晰度。在 GatsbyJS 中，使用它们可以确保你的图像在各种设备屏幕上都有清晰的表现，提升用户体验。

参考文献

4. 返回markdown格式代码

# GatsbyJS 图像清晰 - Shell-Bash

GatsbyJS 是一个快速的 React 应用程序生成器，它可以构建高度优化的静态网站。在 GatsbyJS 中，使用图像需要特别关注图像的清晰度，在本文中，我们将介绍如何在 GatsbyJS 程序中使用图像，并保证它们的清晰度。

## 1. 安装

安装 `gatsby-image` 和 `gatsby-plugin-sharp` 插件：

```bash
npm install gatsby-image gatsby-plugin-sharp

2. 使用

将图像路径作为 FluildObject 参数传递给 gatsby-image，它将会自动处理图像的清晰度。

import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"

export default ({ data }) => (
  <div>
    <h1>My Photos</h1>
    {data.allFile.edges.map(({ node }) => (
      <div key={node.id}>
        <h2>{node.name}</h2>
        <Img fluid={node.childImageSharp.fluid} />
      </div>
    ))}
  </div>
)

export const query = graphql`
  query {
    allFile(filter: { sourceInstanceName: { eq: "photos" } }) {
      edges {
        node {
          id
          name
          childImageSharp {
            fluid(maxWidth: 800) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }
`