web-dev-qa-db-ja.com

アニメーションGIFを追加してWebアプリを反応させる

データをバックエンドに公開するときに、反応Webアプリケーションの遷移状態を定義しようとしています。

Renderメソッドでアニメーションgifを表示したいのですが。

だから私はgif画像をインポートします（このように- enter image description herehttps://media.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif ）

単純なインポートを使用する

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

レンダリングに追加します

お気に入り：

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

しかし、react-devサーバー端末でエラーが発生します

不明なキャラクター

アニメーションGIFをプレーンリアクションSPAに追加する方法。

javascriptreactjsanimated-gif
5
Probosckie

URLを使用したバージョンがありましたが、機能しなくなりました。スピナーをGIFとしてダウンロードできるサイトを見つけたので、その.gifを画像フォルダーに入れました。そこからあなたは使うことができます：

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

＆

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

require('path')メソッドも使用できます

require()メソッドは画像をフェッチし、それをデータURI形式に変換します ここでデータURIについてお読みください

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