リアブートストラップスタイリングがapiコール終了前に表示されます

Question

私はAxiosを使ってランダムイメージを取得する小さなアプリケーションをReactで作っています。私はReact-bootstrapを使って画像をスタイルしていますが、画像がロードされる前に小さな白いボックスが半秒間表示されます。どうすれば解決できますか？

これは私のコードです。その前にそう

import React, { Component } from 'react'; 
import axios from 'axios'; 
import { Link } from 'react-router-dom'; 
import { Image, Button } from 'react-bootstrap'; 


const ROOT_URL = 'myurl' 

export default class WhatDog extends Component { 

    constructor(props){ 
    super(props); 

    this.state = { randomImg: '' }; 
    } 

    componentDidMount(){ 
    axios.get(ROOT_URL) 
    .then(res => { 
     const data = res.data.message 
     this.setState({ randomImg: data }) 
    }) 
    } 

    renderImage(){ 
    return(
     <div> 
     <Image src={this.state.randomImg} className="img" thumbnail/> 
     <Link to="/"> 
      <Button bsStyle="danger" bsSize="large">Go back</Button> 
     </Link> 
     </div> 
    ) 
    } 



    render() { 

    return (
     <div className="App"> 
      { 
      (this.state.randomImg === '') 
      ? <div> 
       <h1>Loading...</h1> 
       </div> 

      : <div> 
       {this.renderImage()} 
       </div> 
      } 
     </div> 
    ); 
    } 
} 

Answer 1

画像がされた後、ブラウザは、onLoadイベントを発生します、あなたはそれに名前を付ける... loadedは、NOT display: none ...隠さにvisibilityを設定しました！ display: noneもローディングを防ぎます。

ソリューションは、この

<Image 
    src={this.state.randomImg} 
    style={!this.state.imgVisible ? {visibility: 'hidden'} : {}} 
    onLoad={() => this.setState({ imgVisible: true })} 
/> 

ノートのようなものになります。これは、あなたがあなたの代わりにクラス名も、その十分なことができる最高のされていない、インラインスタイルと矢印機能を使用しますが、デモを簡単にするためにされたが、それまであなた;）

あなたは考えを持っています...