在完成api调用之前显示的React-bootstrap样式

我正在React中制作一个小应用程序，使用Axios获取随机图像。我正在使用React-bootstrap来设置图像的样式，但是在图像加载完成之前，会显示一个半小时的白色框。我该如何解决这个问题？在完成api调用之前显示的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> 
    ); 
    } 
}

来源

2017-08-25 FakeEmpire

你没有看到** Loading ... **？ –

我看到加载，但我也看到它下面的小空白框。 – FakeEmpire

图像需要一些时间，直到它实际上完成由浏览器加载。 – webdeb

浏览器将触发onLoad事件，图像已被后，你的名字.. loaded所以在这之前，设置visibility隐藏..不display: none！因为display: none也会阻止加载。

的解决方案可能是这个样子

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

注：这是使用内联样式和箭头的功能，这是不是最好的，但对于演示的简单的话，你也可以你的className代替，它取决于你;）

你有想法...

来源

2017-08-25 20:33:23 webdeb

它工作正常！我只是改变了“风格”到“风格”。谢谢，朋友。 ;） – FakeEmpire

Aa，gotcha，谢谢，我会更新它。 – webdeb

也注意到，当你改变图像时，你必须将'imgVisible'再次设置为'false' – webdeb

在完成api调用之前显示的React-bootstrap样式

回答

相关问题