score:2
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:
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':
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:
here is some documentation to read to better understand:
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.
Source: stackoverflow.com
Related Query
- How to import GIF in NextJS
- How to import external css file in nextjs app
- How to import API route in NextJS for getStaticProps?
- How to pass values to components using dynamic import of NextJS
- How to solve SyntaxError: Cannot use import implementing Magic with NextJS in a Typescript setup?
- How to get dimension from import SVG component - nextJS
- How to import two component in Nextjs
- How to use dynamic import in NextJS to import an SDK
- How to import component to component in nextjs
- How to use dynamic import one time only with NextJS
- How to combine multiple import statements into one in React / Nextjs app?
- How to resolve "Cannot use import statement outside a module" in jest
- How to import and export components using React + ES6 + webpack?
- How to import a CSS file in a React Component
- How to import image (.svg, .png ) in a React Component
- How do you import a javascript package from a cdn/script tag in React?
- How to make React CSS import component-scoped?
- How to import CSS modules with Typescript, React and Webpack
- How to import jQuery UI using ES6/ES7 syntax?
- how to import material ui icons?i met some problems using Material ui icons
- How to make an import shortcut/alias in create-react-app?
- How to import libraries using CDN links into reactjs?
- How to import a .txt file from my source?
- How to use absolute path to import custom scss, when using react + webpack?
- How to import an entire folder of SVG images (or how to load them dynamically) into a React Web App?
- How do I fix a Firebase 9.0 import error? "Attempted import error: 'firebase/app' does not contain a default export (imported as 'firebase')."
- how can i use application/ld+json in nextjs
- How to fix error: Attempted import error: 'Route' is not exported from 'react-router-dom'
- How to dynamically import SVG and render it inline
- How to deploy NextJS with NGINX?
More Query from same tag
- Integrate/ Inject React Component into Static(loaded) HTML
- How to prevent Navbar going under elements on mobile?
- How to map/loop 2 array values to an anchor tag with href and text?
- Can I change the order of li elements conditionally in React
- How to reload the current component in react?
- How to prevent the user from accessing other parts of the page until the customized alert box is closed?
- My firebase data disappears after some time
- React setState fetch API
- How do I debug a create-react-app on AWS Amplify
- Expected 'this' to be used by class method
- Calling modular custom javascript module function twice from React component. Why is it being called twice? Scenario shown below:
- Material dataTable
- add a `new Audio` element to my redux store
- How to mock an exported const in jest
- How to get React setupProxy to work correctly with express.js
- Build Failed - Non-Zero Exit Code Detected after 'npm build' in AWS Amplify
- How to delete The array item in react js?
- ReactJS adding a data to a specific row from my custom table
- How to repeat an element n times using JSX and Loadsh
- How can I disable the ring shadow with TailwindCSS?
- React Functional Component Lifecycle Flow with useEffect, both [] and [var]
- React: Updated state not reflecting in recursive useCallback
- How to get the original original Default Arrangement from sorted array?
- How to remove active class with click in my case
- Cannot get my child component to re render on props change
- 'dispatch' Uncaught TypeError React-Redux
- Using Constructor(props) without Class Component
- How to fix "Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0" ERROR
- this.setState() doesn't render fetched Firebase pictures
- React Redux and React Router connect