Javascript 在完成api调用之前显示React引导样式

我正在React中制作一个小应用程序，它使用Axios获取随机图像。我正在使用React引导设置图像样式，但是在加载图像之前，会显示半秒钟的白色小框。我如何解决这个问题

这是我的代码：

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>
    );
  }
}

import React，{Component}来自'React'；
从“axios”导入axios；
从'react router dom'导入{Link}；
从“react bootstrap”导入{Image，Button}；
const ROOT_URL='myurl'
导出默认类WhatDog扩展组件{
建造师（道具）{
超级（道具）；
this.state={randomImg:''}；
}
componentDidMount（）{
获取（根目录URL）
。然后（res=>{
const data=res.data.message
this.setState（{randomImg:data}）
})
}
渲染（）{
返回(
回去
)
}
render（）{
返回(
{
（this.state.randomImg==''）
? 
加载。。。
: 
{this.renderImage（）}
}
);
}
}

浏览器将触发

onLoad

事件，在图像被加载后，您可以命名它<代码>已加载因此在此之前，请将

可见性

设置为隐藏。。非

显示：无

！因为

display:none

也会阻止加载

解决方案可能是这样的

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

this.setState（{imgVisible:true}）
/>

注意：这是使用内联样式和箭头函数，这不是最好的，但为了演示的简单性，您也可以使用一个类名，这取决于您；）

---

您已经想到了…

浏览器将触发

onLoad

事件，在图像加载后，您可以命名它<代码>已加载因此在此之前，请将

可见性

设置为隐藏。。非

显示：无

！因为

display:none

也会阻止加载

解决方案可能是这样的

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

this.setState（{imgVisible:true}）
/>

注意：这是使用内联样式和箭头函数，这不是最好的，但为了演示的简单性，您也可以使用一个类名，这取决于您；）

---

你想到了…

你看不到加载…？我看到了加载，但我也看到了它下面的白色小框。图像需要一段时间，直到浏览器实际加载完成。如果没有看到实际渲染图像的代码，可能很难确定图像上的样式为何奇怪。你能告诉我你的影像课的来源吗？就我所知，您提供的代码似乎没有任何问题。我是否应该向renderImage函数添加setTimeout？您没有看到加载…？我看到加载，但我也看到了它下面的白色小框。图像需要一段时间才能被浏览器实际加载完成。如果没有看到实际渲染图像的代码，可能很难确定图像上的样式为何奇怪。你能告诉我你的影像课的来源吗？据我所知，您提供的代码似乎没有任何问题。我应该向renderImage函数添加setTimeout吗？它成功了！我唯一改变的是“风格”改为“风格”。谢谢，朋友。；）另外请注意，当您更改图像时，您必须再次将

imgVisible

设置为

false

才行！我唯一改变的是“风格”改为“风格”。谢谢，朋友。；）另外请注意，更改图像时，必须将

imgVisible

再次设置为

false