通过清晰的方式在Gatsby应用程序中使用图像

图像显示是Web开发中的常见任务，如何在Gatsby应用程序中使用它似乎有些困惑，本文介绍了它的答案。

盖茨比（Gatsby）具有许多功能，可以赢得开发人员的喜爱，并且胜过其他主流静态网站生成器。 这些功能之一是gatsby-image组件。 它使用您定义的指定尺寸范围解决了图像优化问题，并逐步响应地显示在网页上，为用户提供了舒适的浏览体验。

使用gatsby-image的步骤

就像官方文档所说的那样，在盖茨比网站上实现gatsby图像需要三个步骤：

• 安装gatsby-image组件和其他两个构建依赖插件： gatsby-transformer-sharp和gatsby-plugin-sharp
• 在gatsby-source-filesystem插件中以及在“ gatsby-config.js”插件部分中的两个以上插件中定义图像源目录
• 将“ gatsby-image”组件导入您的gatsby页面组件，并声明一个具有“ fixed”或“ fluid”属性的图像标签/实例，其值源自graphql查询。
  

在第2步中，您告诉Gatsby构建工具，在哪里可以找到所有图像文件的“ root”目录。 就像doc示例一样，这里的根目录是当前Gatsby项目的`src / images /`：

{
  resolve : `gatsby-source-filesystem` ,
  options : {
    name : `images` ,
    path : path.join(__dirname, `src` , `images` ),
  },
},

在第3步中，您告诉gatsby-image组件实例在哪里获取文件：graphql查询结果。

export const query = graphql `
  query {
    file(relativePath: { eq: "blog/avatars/kyle-mathews.jpeg" }) {
      childImageSharp {
        # Specify the image processing specifications right in the query.
        # Makes it trivial to update as your page's design changes.
        fixed(width: 125, height: 125) {
          ...GatsbyImageSharpFixed
        }
      }
    }
  }
`

要放置图像的目录？

看到这个graphql代码片段后，您可能会想知道blog / avatars / kyle-mathews.jpeg在哪里？ 是在项目根目录下还是src / images下？ 让我们从一个空白的gatsby项目中进行测试。

• 
  创建gatsby项目：

$  gatsby new using-image-in-gatsby

• 将kyle-mathews.jpeg图片放在`src / images / blog / avatars /`下。

• 将原始index.js内容替换为以下代码：

注意：不要忘记IndexPage属性中的'data'属性。

现在，我们可以启动网站，而无需修改其他内容：

$  gatsby develop

在浏览器中访问“ http：// localhost：8000 /”，您将看到正确的结果。

该实验验证了我们的推测，即：

使用在gatsby-source-filesystem中定义的路径下的相对路径作为查询条件的gatsy-image query（graphql）！

动态图像源值如何？

上面的示例使用静态值blog / avatars / kyle-mathews.jpeg在graphql表达式中进行查询。 然后，如果查询条件来自降价文件元数据怎么办？

关于[ 在Markdown文章和页面中使用图像的官方文档告诉我们，将featureImage放在markdown文件的相同位置：

example-post.md：

---
title: My Amazing Post
featuredImage: ./awesome-image.png
---

Content goes here!

在此解决方案中，它可以工作，但是，如果您有很多帖子，每个帖子中都包含许多图像，则目录结构将急剧增大并最终导致混乱。

如何以合理的方式重构图像路径？

• 第一步：在gatsby-config.js中定义一个新的内容源

plugins: [
    {
      resolve : `gatsby-source-filesystem` ,
      options : {
        path : ` ${__dirname} /content` ,
        name : `content` ,
      },
    },
    ...
]

• 第二步：将所有图像放在内容/资产下

将图像文件和.md文件分开到不同的文件夹

• 第三步：使用降价文件元数据中的相对路径引用图像。

• example-post.md：

---
title: My Amazing Post
featuredImage: ../assets/awesome-image.png
---

Business intro is missing...

如何在Gatsby应用程序中使用html img标签

在普通的Web应用程序中，html img元素可以使用相对或绝对路径来分配src属性。 我们以本机和静态方式使用图片，就像官方文档所说的那样，将图片放置在静态文件夹下，按预期在网页中显示图片。 但是，当我们构建并部署gatsby站点GitHub Pages时 ，请使用以下URL模式访问它：

https://username.github.io/your-gatsby-website/

img标签声明的图像全部损坏！

尽管所有由$ gatsby build --prefx-paths生成的gatsby-image都可以工作，但是这些本机img不起作用。

有什么解决方案？

• 一种解决方案是将所有`img`重构为`gatsby-image`组件

• 另一种解决方案是在img`src`属性中添加上下文前缀。

例如：

< img src = "/ueofcweb/images/project-home.jpg" className = "img-fluid" alt = "ultronele screenshot" />

ueofcweb是github项目名称， images / project-home.jpg实际上在ueofcweb / static下 。

如果您要重构使用大量img标签的传统网站，则第二种选择是便宜的选择。 我的生产官方网站是从bootstrap / jquey堆栈迁移而来的，当我将其添加到Gatsby展示柜中时 ，我花了数小时来弄清楚第二种方法对我来说是最好的方法。

我可以在这篇文章中给出的最后一个注意事项是：

不要在“静态”下的文件夹中添加文件夹到gatsby源文件系统中，这是一种错误的做法，最终会导致生成错误“ childImageSharp”为null。

盖茨比图像是我遇到的最好的响应式图像解决方案。 它使您摆脱了构建阶段中繁琐的优化工作，为您的网站增加了良好的性能和出色的用户体验。 它值得您花时间去研究和熟练使用。

From: https://hackernoon.com/using-image-in-gatsby-application-by-a-clear-way-qu2ah34m8