score:2

Accepted answer

next/image does support gif files...my first thought would be to ask if you have explicitly whitelisted a set of external domains in your next.config.js file? for the next/image loader to handle external domains they must be individually whitelisted. here are the contents of my next.config.js file.

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)
);

so you would have to whitelist media.giphy.com and it should work just fine. i also do recommend setting the quality prop for the image component. quality defaults to 75 out of 100 but i'd suggest making that closer to 100 for better ux.

score:0

at first i entered your code: your code and nextjs gave me this as an error:

screenshot erreur

so i added the domain 'media.giphy.com' in the configuration 'next.config.js' this file must be added to the root of the project, at the same level as the 'pages' or 'lib' folder for example and must be called 'next.config.js':

file place screenshot

and in it you have to put this:

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

then you have to restart your next js server. and normally you get this:

image screenshot

here is some documentation to read to better understand:

https://nextjs.org/docs/basic-features/image-optimization

score:0

you can also use the prop unoptimized to serve the image as it is:

make sure you white list your domain in the next.config.js

module.exports = {
 images: {
     domains: ['source_image_domain']
 }
};

then in your image component:

import image from 'next/image';

<image unoptimized={true} src={gif} alt="the gif" height={500} width={500} />

next documentation: https://nextjs.org/docs/api-reference/next/image#animated-images

score:1

next/image now supports gifs.

you should be able to import the gif and then toss it into the src like this

import image from 'next/image';
import mygif from 'url'

...

<image src={mygif} alt="my gif" height={500} width={500} />

if the url doesn't work here, it should work if you download the gif and toss it into assets.


Related Query

More Query from same tag