如何在 NextJS 中导入 GIF

Question

我正在尝试使用 Nextjs 准备我的作品集网站。我想在网站中使用 gif。您可以在下面找到我的代码。我找不到怎么做。

Answer 1

Next/Image 确实支持 GIF 文件...我的第一个想法是询问您是否已将next.config.js文件中的一组外部域明确列入白名单？为了让 Next/Image Loader 能够处理外部域，必须将它们单独列入白名单。这是我的 next.config.js 文件的内容。

const path = require('path');
const withBundleAnalyzer = require('@next/bundle-analyzer')({
    enabled: !!process.env.ANALYZE
});

module.exports = withBundleAnalyzer({
    webpack(
        config,
        {
            dev = process.env.NODE_ENV === 'development',
            isServer = typeof window === 'undefined'
        }
    ) {
        if (isServer) {
            require('./scripts/generate-sitemap');
        }
        /**
         * !dev ? preact/compat : react, react-dom on build
         * reduce page weight in production by ~10%
         */
        if (!dev && !isServer) {
            Object.assign(
                (config.resolve.alias['@/'] = path.resolve('./')),
                {
                    react: 'preact/compat',
                    'react-dom': 'preact/compat'
                }
            );
        }
        return config;
    },
    sourceMaps: {
        productionBrowserSourceMaps: true
    },
    images: {
        domains: [
            'avatars.githubusercontent.com',
            'faderoom-headless.us',
            'www.faderoom-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',
            'scontent-sea1-1.xx.fbcdn.net',
            'd2zdpiztbgorvt.cloudfront.net',
            'platform-lookaside.fbsbx.com',
            'square-postoffice-production.s3.amazonaws.com'
        ]
    },
    future: {
        webpack5: true,
        strictPostcssConfiguration: true
    },
    i18n: {
        locales: ['en-US'],
        defaultLocale: 'en-US'
    }
});

console.log(
    'next.config.js',
    JSON.stringify(module.exports, null, 2)
);

所以你必须将其列入白名单media.giphy.com，它应该可以正常工作。我还建议为组件设置质量属性Image。质量默认为 75 分（满分 100 分），但我建议将其设置为接近 100 分，以获得更好的用户体验。