how to display images in chat bot using custom Component .Any example?

Hi I am new to react. I want to display an Image in chat bot using custom component. Please providing any example. For example i am trying below code using an api(json Data). If response is text type display that message using addResponse method. Similarly buttons also. But if response is Image type then how to display using customcomponent.Please help me

`export default class App extends Component { state = { todoss: [] }

componentDidMount() { addResponseMessage(‘Welcome to this awesome chat!’); }

handleNewUserMessage = (newMessage) => {
  fetch('http://localhost:5005/webhooks/rest/webhook', {
        method: 'POST',
         headers : new Headers(),
         body:JSON.stringify({"sender": "Rasa", "message": newMessage}),
         }).then((res) => res.json())
         .then((data) => {
          var first = data[0];
          var mm= first.text;
          var i;
          console.log(mm)
          toggleMsgLoader();
          setTimeout(() => {
          toggleMsgLoader();
        if (data.length < 1) {
		   addResponseMessage("I could not get....");
	    } else {
		//if we get response from Rasa
		for ( i = 0; i < data.length; i++) {
			//check if there is text message
			if (data[i].hasOwnProperty("text")) {
			     addResponseMessage(data[i].text );
			}
			if (data[i].hasOwnProperty("buttons")) {
				 setQuickButtons([ { label: data[i].buttons[0].title, value: 'Yes' }, { label: 
                                        data[i].buttons[1].title, value: 'No' } ]);
                           }
			if (data[i].hasOwnProperty("image")) {
			    this.setState({todos: data[i].image})

			 }
		   }
	     }
	  }, 2000);
   })
   }

   handleQuickButtonClicked = (e) => {
       addResponseMessage('Selected ' + e);
       setQuickButtons([]);
   }
 render() {
   return (
     <div>
        <Widget
             title="Rasa Sample Bot"
             subtitle="Asistente virtual"
             senderPlaceHolder="Type here ..."
             handleNewUserMessage={this.handleNewUserMessage}
             handleQuickButtonClicked={this.handleQuickButtonClicked}
             badge={1}
             customComponent={(customData) => (<div><img src={todoss.image} /></div>) }
  />
  <h2> hi</h2>
  </div>
  </div>
  );
}

} `

[cosmeoes]

Here’s how you would add an image at the beginning of the chat.

import React, { Component } from 'react';
import { Widget, renderCustomComponent } from 'react-chat-widget';
import './App.css';
import 'react-chat-widget/lib/styles.css';

//This is the image component, copy it to your project
class Image extends Component {
  render() {
    return <img alt="placeholder" src={this.props.src}></img>
  }
}
class App extends Component {
    componentDidMount() {
        let imageSrc = "https://wolper.com.au/wp-content/uploads/2017/10/image-placeholder.jpg"; //Place here your image location

        //Here I'm adding the component
        renderCustomComponent(Image, {src: imageSrc}) 
    }

    render() {
        return (
          <div className="App">
            <Widget />
          </div>
        );
      }
}

export default App;

In your code you probably want add it after the check for an image.

if (data[i].hasOwnProperty("image")) {
      let imageSrc = //get image location
      renderCustomComponent(Image, {src: imageSrc}) 
}

[arslanqadir69]

how we can send images voice messages and videos through react-chat-widget