web-dev-qa-db-fra.com

Ajouter des gifs animés pour réagir aux applications Web

J'essaie de définir un état de transition pour mon application Web React lorsque je publie des données vers le backend.

Je veux afficher un gif animé dans ma méthode de rendu.

Donc j'importe l'image gif (comme ça enter image description herehttps://media.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif )

en utilisant une simple importation

import logo from '../assets/load.gif'

et l'ajouter à mon rendu

comme:

<img src={logo} alt="loading..." />

mais je reçois une erreur dans mon terminal serveur react-dev

personnage inconnu

Comment ajouter des gifs animés à un SPA à réaction simple.

javascriptreactjsanimated-gif
5
Probosckie

J'avais une version qui utilisait une URL mais elle a cessé de fonctionner. J'ai trouvé un site sur lequel vous pouvez télécharger le spinner au format GIF, puis j'ai mis ce fichier .gif dans mon dossier d'images. De là, vous pouvez utiliser:

import logo from '../assets/load.gif'

&

<img src={logo} alt="loading..." />
8
Alex

Vous pouvez également utiliser la méthode require('path')

La méthode require() récupère les images et les convertit au format URI de données Lisez ici l'URI de données

<img src={require('../assets/load.gif')} alt="loading..." />
4
Bharath