CODEWITHSUNDEEP
reactjsimagenext.jsgifanimated-gif
Bram-peter van Zalk
Bram-peter van Zalk

Reputation: 11

Animated GIF not animating in browser

I have an animated GIF which was working fine in development, but not after build. I have tried it in chrome and edge. I have a static placeholder which is displayed fine and on mouseEnter it gets replaced by the animated file. It does do this as the src has the correct file, but it does not animate. I can see that the correct image is loaded as it is slightly different to its static placeholder. The files are static files, in the public folder. Is there something I need to add in the config? I am not sure where to start trouble shooting on this as I am quite new to this.

This is the component :

import React, { useState } from 'react'
import Image from 'next/image'
import styles from '../../styles/Interest.module.scss'

type props = {
    gifRef: React.LegacyRef<HTMLDivElement>
    interest: {
        title: string
        gif: string
        gif_static: string
        text: string
        bg: string
        id: number
    }
}

export const Interest = ({ interest, gifRef }: props) => {
    const {title, gif, gif_static, text, bg} = interest
    const [img, setImg] = useState<string>(gif_static) 

  return (
    <div    className={ styles.interest } 
            style={{backgroundColor: bg}}
            onMouseEnter={ () => setImg(gif) }
            onMouseLeave={ () => setImg(gif_static)}
            ref={interest.id === 1 ? gifRef : null}
    >
        <h2>{ title }</h2>
        { gif ? <Image src={ img } width={500} height={500} alt={ interest.title }/> : null }
        <p>{ text }</p>
    </div>
  )
}

Rest of code is here: https://github.com/Bponthemove/my-new-portfolio

Upvotes: 0

Views: 2139

Answers (1)

pwbred
pwbred

Reputation: 123

Next/image will try to optimize any image you throw at it by default, and does not support GIFs.

A workaround would be to set the unoptimized attribute to true on <Image />

See docs: https://nextjs.org/docs/api-reference/next/image#unoptimized

Example:

<Image
  src={'https://domain.tld/image.gif'}
  layout={'responsive'}
  height={175}
  width={175}
  alt={`A cute animal!`}
  unoptimized={true}
/>

Upvotes: 1

Related Questions