npm 包 gatsby-remark-images 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

在 Web 前端开发中，写博客是比较常见的事情。博客中通常会插入一些图片来展示内容，但是，将大量的图片直接放在文章中会使得博客加载速度变得很慢。为了优化网页加载速度，我们可以使用 gatsby-remark-images 这个 npm 包来实现对图片的优化。

什么是 Gatsby？

Gatsby 是一款基于 React 和 GraphQL 的前端应用框架。相对于传统的静态资源生成器，它支持一些更加高级的场景，比如动态数据获取，自适应图片处理，路由映射等。

对于博客网站来说，我们可以使用 Gatsby 来生成一个静态资源站点，使得访问者可以更快地获取需要的资源，同时也可以有效的减少服务器压力，提升网站的稳定性。

那么 Gatsby-Remark-Images 就是 Gatsby 中固有的一个 Remark 插件，用于为 Markdown 文档中的图片生成格式化的图片数据（比如尺寸大小、缩略图等信息），优化图片加载体验。

怎么使用 Gatsby-Remark-Images ？

下面我们依次介绍 Gatsby-Remark-Images 的安装、使用和配置。

安装

安装 Gatsby-Remark-Images 包：

npm install --save gatsby-remark-images

使用

在 Gatsby 中使用 Remark 插件时，只要将 Remark 插件指定在 gatsby-transformer-remark 的 plugins 数组中即可生效。所以我们需要在在 Gatsby 的配置文件 gatsby-config.js 中加入以下配置：

-- -------------------- ---- -------
-------------- - -
  -------- -
    -
      -------- ----------------------------
      -------- -
        -------- -
          -- ------------
          -----------------------
          -- ---------
        --
      --
    --
  --
-

我们需要将这个插件放在插件列表的第一个位置，这是因为在做图片优化时，它会先做图片处理，再将生成的图片数据替换 Markdown 文件中的图片链接。

最后，在你的 Markdown 文件中，你可以使用以下 Markdown 语法向文章中插入图片：

![Alt text](/path/to/img.jpg)
![Alt text](/path/to/img.jpg "Optional title")

配置

可以传入 gatsby-remark-images 的配置参数嵌套在 gatsby-transformer-remark 插件的 parameters 里面,例如

-- -------------------- ---- -------
-------------- - -
  -------- -
    -
      -------- ----------------------------
      -------- -
        -------- -
          -
            -------- -----------------------
            -------- -
              -- --------------------------------------------------------------
              --------- -----
              --------------------- ------
              ---------- - ------ ------ --
            --
          --
        --
      --
    --
  --
-

可以有以下选项：

maxWidth 图片最大宽度（单位像素），默认情况下展示的图片为原尺寸，不会有固定宽度和高度，会影响页面主题。
linkImagesToOriginal 图片是否要生成 (链接到原图)，参数默认值是 true 。
withWebp 添加(转化)Webp 格式的图片，默认值是 false。
tracedSVG 添加使用 SVG 方式的 placeholder 或占位符的占位符对象，您可以在任何唯一placeholder / bitmap处理阈值下使用其颜色。
quality 图片的质量范围(0-100)，默认值是 90。
backgroundColor 设置颜色表示生成的base64图片 background 。
showCaptions 控制是否显示图片的名字(来自alt属性)，默认为 false。

示例代码

完整的使用示例代码如下：

-- -------------------- ---- -------
------ ----- ---- -------
------ - ------- - ---- --------
------ --- ---- --------------

------ ------- -- ---- -- -- -
  -----
    ------------------------------------------------
    ---- -------------------------- ------- ------------------------ -- --
    --------------------------------------------------- --- -- -
      ----
        --------
        -----------------------------------
        -------------------
      --
    ---
  ------
-

------ ----- ----- - --------
  ---------- -------- -
    ------------------ - --- --- -- -
      ----------- -
        -----
        ------ -
          -------
          --
          --------------- -
            ----- -
              ------------------------
            -
          -
        -
      -
      ----
    -
  -
-

总结

使用 Gatsby-Remark-Images 插件可以极大地提高网站图片的加载速度，同时也可以优化访客的使用体验。如果你正在构建自己的博客网站，可以尝试使用这个插件来为你的网站提供更好的图片加载体验。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/5eedb6a0b5cbfe1ea06115a5