title: How to display dynamically fetched image on client end in react?
body: <p>I'm working of Gallery feature of my website where I wanna show all images to client. I have successfully fetched images from server to client end in the form of blob. Images also display but on second attempt. I need to visit that gallery page for first time for fetching images then I need to visit any page and re-visit that gallery page for displaying those images. </p>
  
  <p>Here is my code. Kindly let me know where I'm making mistake.</p>
  
  <p>Code of main Gallery Component</p>
  
  <pre><code>constructor(props) {
      super(props);
  
      this.state = {
          eventDetail: [],
          images: [],
          imagesInBlob: [],
          url: ''
      }
      this.getAllEventsData = this.getAllEventsData.bind(this);
  }
  
  componentDidMount() {
      this.getAllEventsData();
  }
  
  getAllEventsData() {
      axios({
          method: 'POST',
          url: '/api/Account/GetAllEventsData',
          contentType: 'application/json',
          data: {},
      }).then(function (response) {
          console.log(response);
          this.setState({
              eventDetail: response.data
          });
          this.getAllImages();
      }.bind(this))
  
  
  }
  
  getAllImages() {
      axios({
          method: 'POST',
          url: '/api/Account/GetAllEventImages',
          contentType: 'application/json',
          data: {},
      }).then(function (response) {
          console.log(response);
          this.setState({
              images: response.data
          });
          this.getImageBlobs();
      }.bind(this))
  }
  
  getImageBlobs() {
  
      console.log("Image Objects:", this.state.images);
  
      for (var i = 0; i &lt; this.state.images.length; i++) {
          this.fetchEventImage(this.state.images[i].image_path);
      }
      this.setState({
          imagesInBlob: imageArr
      });
      console.log("Images in Blob:", this.state.imagesInBlob);
  }
  
  fetchEventImage(imagePath) {
      var path = {
          ImagePath: imagePath
      }
  
      axios({
          method: 'POST',
          url: '/api/ImageFetch/FetchEventImages',
          responseType: 'blob',// important
          headers: {
              'Content-Type': 'application/json'
          },
          data: path
      }).then(function (response) {
  
          var re = /(?:\.([^.]+))?$/;
          const url = window.URL.createObjectURL(new Blob([response.data]));
  
          imageArr[img_arr_cnt++] = url;
          console.log("URL: ", url);
  
      }).catch(error =&gt; {
          console.log("Status:", error.response.status);
          console.log("Data:", error.response.data);
      });
  }
  
  handleImageDisplay() {
      var imgTag = "&lt;img src=" + this.state.imagesInBlob[0] + '" /&gt;';
      return imgTag;
  }
  
  render() {
      return (
          &lt;&gt;
              &lt;section id="single-project" className="section"&gt;
                  &lt;div className="container row justify-content-center"&gt;
                      &lt;div className="col-lg-12"&gt;
                          &lt;div className="row justify-content-center"&gt;
                              &lt;div className="col-lg-6 project-info"&gt;
                                  &lt;h3&gt;Meeting on 17th May 2019&lt;/h3&gt;
                                  &lt;DisplayComp propName={this.state.imagesInBlob[0]} /&gt;
                                  &lt;img src={this.state.imagesInBlob[0]} /&gt;
                              &lt;/div&gt;
  
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/section &gt;
          &lt;/&gt;
      );
  }
  </code></pre>
  
  <p>DisplayComp component code</p>
  
  <pre><code>constructor(props){
      super(props);
  }
  
  
  render(){
      return (
          &lt;img src={this.props.propName} alt="image"/&gt;
      );  
  }
  </code></pre>
  
  <p>Please let me know where I'm making mistake and how can I display it on client end?</p>