Javascript 如何在NextJS中导入GIF

我正在用Nextjs准备我的投资组合网站。我想在网站中使用gif。你可以在下面找到我的代码。我找不到怎么做

---

Next/Image确实支持GIF文件……我的第一个想法是询问您是否在

Next.config.js

文件中明确列出了一组外部域？为了让下一个/映像加载程序处理外部域，必须将它们单独列为白名单。下面是我的next.config.js文件的内容

const path=require（'path'）；
const with bundleanalyzer=require（“@next/bundle analyzer”）({
已启用：！！process.env.ANALYZE
});
module.exports=withBundleAnalyzer({
网页包(
配置，
{
dev=process.env.NODE_env==“开发”，
isServer=typeof窗口===‘未定义’
}
) {
如果（isServer）{
需要（“./脚本/生成站点地图”）；
}
/**
*！dev？preact/compat:反应，在生成时反应dom
*将生产中的页面重量减少约10%
*/
如果（！dev&&！isServer）{
Object.assign(
（config.resolve.alias['@/']=path.resolve（'./'），
{
反应：'preact/compat'，
“react dom”：“preact/compat”
}
);
}
返回配置；
},
源地图：{
productionBrowserSourceMaps：true
},
图像：{
域：[
'avatars.githubusercontent.com'，
“无头，我们”，
“www.fadroom-headless.us”，
'dtmqnbkq3btfh.cloudfront.net'，
'secure.gravatar.com'，
"automattic.com",，
'serve.onegraph.com'，
'onegraph.com'，
“maps.google.com”，
“lh3.googleusercontent.com”，
“maps.gstatic.com”，
'thefaderoom146.booksy.com'，
“dev-3cqt2bq0.auth0.com”，
'scocontent-sea1-1.xx.fbcdn.net'，
“d2zdpiztbgorvt.cloudfront.net”，
“platform lookaside.fbsbx.com”，
“square postoffice production.s3.amazonaws.com”
]
},
未来：{
网页5：对，
StrictPostsConfiguration：正确
},
i18n：{
地区：['en-US']，
defaultLocale:“en US”
}
});
console.log(
'next.config.js'，
stringify（module.exports，null，2）
);

---

因此，您必须将media.giphy.com列入白名单，它应该可以正常工作。我还建议为

图像

组件设置质量道具。质量默认为100分之75，但我建议将其接近100分以获得更好的用户体验。

首先，我输入了您的代码： nextjs给了我一个错误：

因此，我在配置“next.config.js”中添加了域“media.giphy.com” 此文件必须添加到项目的根目录中，例如与“pages”或“lib”文件夹处于同一级别，并且必须称为“next.config.js”：

你必须在里面写上：

module.exports = {
    images: {
        domains: ['media.giphy.com']
    }
};

然后，您必须重新启动下一个js服务器 通常你会得到这样的结果：

以下是一些需要阅读以更好理解的文档：

---

而且我还可以将gif文件下载到计算机。不要在图像中发布代码，而是在文本中发布。此外，“我找不到怎么做”-这是什么意思？提问时请明确，并在提问之前阅读。@AndyRay我在标题中陈述了我的主要问题。我还尝试将代码作为文本抛出，但因为它在预览中看起来不像我想要的那样，所以我截图了。下次我会更小心的谢谢你的回答。我很感激