Comment puis-je ajouter une animation de FADE-IN pour NEXTJS / IMAGE lors de son chargement?

Question

J'utilise next/image, qui fonctionne bien, à l'exception du chargement actuel de l'image en est Super Jarring et il n'y a pas d'animation ni de fonte. Y a-t-il un moyen d'accomplir cela? J'ai essayé une tonne de choses et aucun d'entre eux ne fonctionne.

Voici mon code:

<Image
  src={source}
  alt=""
  layout="responsive"
  width={750}
  height={height}
  className="bg-gray-400"
  loading="eager"
/>

Selon the - Docs Je peux utiliser le projet className, mais ceux-ci sont chargés immédiatement et je ne peux pas déterminer aucun moyen d'appliquer une classe après sa charge.

J'ai aussi essayé onLoad, et selon ce ticket, il n'est pas pris en charge: https://github.com/vercel/next.js/issues/20368

Answer 1

Oui, il est possible de capturer l'événement lorsque l'image réelle se charge. J'ai trouvé une réponse à cela sur Reddit et je voulais le republier ici pour d'autres comme moi cherchant un anwser.

"Pour obtenir ceobli pour travailler dans le composant Image NEXTJS, vous devez vous assurer que ce n'est pas le 1x1 px qu'ils utilisent comme espace réservé à la cible.

const [imageIsLoaded, setImageIsLoaded] = useState(false)  
<Image
    width={100}
    height={100}
    src={'some/src.jpg'}
    onLoad={event => {
        const target = event.target;

        // next/image use an 1x1 px git as placeholder. We only want the onLoad event on the actual image
        if (target.src.indexOf('data:image/gif;base64') < 0) {
            setImageIsLoaded(true)
        }
    }}
/>

À partir de là, vous pouvez simplement utiliser le booléen Imageisloaded pour faire du Fadein avec quelque chose comme la bibliothèque de Motion Framer.

Source: https://www.reddit.com/r/nextjs/comments/lwx0j0/fade_in_when_loading_nextImage/