Reactjs 如何在盖茨比博客网站上高效地显示GIF图像？

几天前，我买了一个盖茨比博客主题，并试图修改它。该博客网站使用图像（PNG、JPEG），而不是动画GIF。所以我尝试在所有博客文章中使用GIF图像，但它影响了网站性能。 另外，我注意到它没有提供GIF格式。如何在我的博客上高性能地使用GIF？

你可以。然后用

代替您的

img

标签。为了让这一切变得非常简单，我使用了一个React组件，其中包括视频可见时的自动播放：

import React, { useEffect } from "react"
import PropTypes from "prop-types"
import { useInView } from "react-intersection-observer"

const GifVideo = ({ threshold = 0.15, ...playerProps }) => {
  const [ref, inView] = useInView({ threshold })

  useEffect(() => {
    if (inView) {
      ref.current?.play()
    } else {
      ref.current?.pause()
    }
  }, [ref, inView])

  return <video ref={ref} autoPlay playsInline muted loop {...playerProps} />
}

export default GifVideo

GifVideo.propTypes = {
  src: PropTypes.string,
  threshold: PropTypes.number,
  className: PropTypes.string,
}

import React，{useffect}来自“React”
从“道具类型”导入道具类型
从“react intersection observer”导入{useInView}
const GifVideo=（{threshold=0.15，…playerProps}）=>{
常量[ref，inView]=useInView（{threshold}）
useffect（（）=>{
如果（查看）{
参考当前？.play（）
}否则{
参考当前？暂停（）
}
}，[ref，inView]）
返回
}
导出默认视频
GifVideo.propTypes={
src:PropTypes.string，
阈值：PropTypes.number，
类名：PropTypes.string，
}

那么，要使用它，就很简单：

<GifVideo src="/your/video.mp4" width={400} className="some-class" />

不管它值多少钱，我不建议在《盖茨比》（Gatsby transformer sharp）中使用锋利的GraphQL图像转换器。它的速度非常慢，将演示与查询结合起来，并且没有提供任何处理艺术指导的方法。

我过去常在盖茨比博客上展示GIF

安装盖茨比评论互动gifs

npm安装——保存盖茨比评论互动GIF

纱线添加盖茨比评论互动礼品

将此配置添加到

gatsby config.js

：

!！确保您正在

prismjs

config上方添加此项

MD文件中用于在盖茨比博客上显示GIF的示例代码：

---

不要使用GIF。使用视频代替当然，我知道使用视频比使用GIF要好得多，但如果我必须使用GIF，那该怎么办？

{
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-interactive-gifs`,
            options: {
              root: `${__dirname}`,
              src: `${__dirname}/content/gif`,
              dest: `${__dirname}/public/static/gifs`,
              play: `${__dirname}/src/img/play.gif`,
              placeholder: `${__dirname}/src/img/play.gif`,
              loading: `${__dirname}/src/img/play.gif`,
              relativePath: `/static/gifs`,
            },
          },
        ],
      },
    },

From plugin document:
root - The root of your project.
src - Where all the gifs you want processed are stored. Absolute path.
dest - A path in public where your gifs are stored. Absolute path.
play - An image to indicate that the gif can be interacted with. Absolute path.
placeholder - An image to show when the gif is missing in action. Absolute path.
loading - An image which shows when the gif is downloading. Absolute path.
relativePath - The relative path served from public/.