React-bootstrap styling showing up before finished api call

I am making a small application in React that fetches a random image using Axios. I am using React-bootstrap to style the image, however a small white box is displayed for half of a second before the image is done loading. How can I resolve this?

This is my code:

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 {


    this.state = { randomImg: '' };

    .then(res => {
      const data =
      this.setState({ randomImg: data })

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

  render() {

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

            : <div>

The browser will fire the onLoad event, after the image has been, you name it.. loaded so before that, set the visibility to hidden.. NOT display: none ! Because display: none will also prevent the loading.

The solution might look something like this

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

Note: This is using inline styles and arrow functions, which is not best, but for simplicity of the demo its enough, you could also you a className instead, its up to you šŸ˜‰

You got the idea…