Показать изображение из Google Search API в реагировать

Question

Я создаю пользовательское приложение для поиска изображений. У меня есть текстовое поле поиска, в которое пользователь вводит текст, и из моего flask бэкэнда я использую API поиска изображений Google , чтобы получить искомые изображения. Теперь я хочу отобразить эти изображения на внешнем интерфейсе, я использую React для своего внешнего интерфейса.

При нажатии кнопки я выполняю вызов извлечения, как показано ниже,

 fetch('localhost/image_search/'+this.state.inputQuery)
            .then(res => res.json())
            .then(
                (result) => {
                    this.setState({
                        images: result
                    })
                }
            );

У меня есть 2 вопроса. Как я должен отправлять изображения из бэкэнда? Отправить их как капли? Как я могу получить изображение из бэкэнда, как его можно отобразить на внешнем интерфейсе?

TL; DR, я создаю свое собственное приложение для поиска в Google для поиска изображений в Интернете, как только пользователь дает поиск текста, как я могу отобразить искомые изображения в интерфейсе пользователя.

Answer 1

Вы можете отправлять изображения в виде URL-адресов, то есть массив изображений

['https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2020/02/Google-Image-Search.jpg', 'https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2020/02/Google-Image-Search.jpg'];

Так как вы устанавливаете их для изображений в состоянии, в вашем методе рендеринга:

render(){
return{
{this.state.images.map((x,i)=>{
<img src={x} alt="image" key={i} />
});}
}
}

Надеюсь, это поможет!