如何在Gatsby站点中将.gif文件渲染到移动设备PNG框架中

实现原理很简单，通过CSS层叠定位把GIF放在设备框架的屏幕显示区域即可，无需引入额外第三方插件，原生Gatsby即可完成开发。

具体实现步骤 #

• 资源准备
  把你需要展示的GIF文件、移动设备框架图都放入项目src/assets/目录下，避免打包后出现资源路径错误。本次用到的移动设备框架图如下：
  
• 编写封装组件
  在src/components/目录下新建MobileFrame.js组件，参考代码如下：

  import * as React from "react"
  // 导入对应资源，路径根据你实际存放位置调整
  import mobileFrame from "../assets/IjYv4.png"
  import targetGif from "../assets/你的演示gif文件名.gif"
  import "./mobileFrame.css"
  
  const MobileFrame = () => {
    return (
      <div className="mobile-frame-wrapper">
        <img src={mobileFrame} alt="移动设备框架" className="frame-img" />
        <img src={targetGif} alt="演示动画" className="content-gif" />
      </div>
    )
  }
  
  export default MobileFrame
  

  同目录下新建mobileFrame.css样式文件：

  .mobile-frame-wrapper {
    position: relative;
    /* 可根据需求调整整体大小，此处做响应式适配 */
    max-width: 320px;
    width: 100%;
    margin: 0 auto;
  }
  .frame-img {
    width: 100%;
    height: auto;
    display: block;
  }
  .content-gif {
    position: absolute;
    /* 数值可根据实际显示效果微调，适配当前设备框架的屏幕区域 */
    top: 10%;
    left: 5%;
    width: 90%;
    height: 80%;
    object-fit: cover;
    /* 可选：加圆角匹配设备屏幕的圆角效果 */
    border-radius: 16px;
  }
  

• 页面调用
  在你需要展示该效果的页面文件中直接导入组件使用即可：

  import MobileFrame from "../components/MobileFrame"
  
  // 页面内容中直接插入组件
  <MobileFrame />
  

可选优化点 #

• 如果需要在多个页面展示不同GIF，可以把GIF路径作为组件props传入，提升组件复用性
• 若GIF加载速度慢，可以用Gatsby官方的gatsby-plugin-image插件处理GIF资源，优化加载体验

内容的提问来源于stack exchange，提问作者Hasham Minhas