在NextJS项目中如何正确导入并使用GIF格式图片

本地静态GIF使用步骤 #

• 将GIF文件存入项目根目录的public文件夹下，例如存放路径为public/portfolio/demo-work.gif
• 原生img标签直接引用即可：

<img src="/portfolio/demo-work.gif" alt="作品集作品演示" />

配合next/image组件使用（推荐） #

Next.js内置的Image组件自带性能优化，使用GIF时需要添加unoptimized属性避免动画效果丢失：

// 首先引入Image组件
import Image from 'next/image'

// 组件内调用代码
<Image
  src="/portfolio/demo-work.gif"
  alt="作品集作品演示"
  width={900}
  height={500}
  unoptimized // 核心配置，禁用默认图片优化避免GIF被转成静态图
/>

非public目录的GIF引入方法 #

如果你把GIF存放在src/assets等非public目录下，直接import引入后传入src属性即可：

import demoGif from '@/assets/works/demo.gif'

<Image
  src={demoGif}
  alt="作品集作品演示"
  width={900}
  height={500}
  unoptimized
/>

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