React Native - Как отобразить изображение, возвращенное API Google Place Photos? - PullRequest
Новая
       42

React Native - Как отобразить изображение, возвращенное API Google Place Photos?

0 голосов
/ 10 июня 2018

Я разработал бэкэнд-API, который с учетом широты и долготы местоположения возвращает изображение города с помощью Google Places Photos API

Приложение My React Native вызывает конечную точку дляпопробуйте загрузить изображение в Image виде.Вот как приложение вызывает конечную точку и получает ответ ... 

  try {
    let imageResponse = await fetch(
      `https://budgettrip.herokuapp.com/locationimage/${latitude}/${longitude}`
    );
    let response = await imageResponse;
    this.setState({ locationImage: response });
  } catch (error) {
    console.error('location image error', error);
  }

Внутренний код для получения изображения из Google и отправки ответа обратно в мое приложение React Native ... 

var locationimage = {
    uri: `https://maps.googleapis.com/maps/api/place/photo?photoreference=${photo_reference}&sensor=false&maxheight=1600&maxwidth=1600&key=${process.env.GOOGLE_PLACES_API_KEY}`,
    headers: {
      'User-Agent': 'Request-Promise'
    }
  };

  rp(locationimage)
    .then(function(repos) {
      res.send(repos);
    })
    .catch(function(err) {
      // API call failed...
      res.send(JSON.stringify({ error: 'Could not get image' }));
    })

Вы можете попробовать конечную точку, чтобы увидеть, как выглядит ответ в случае успеха здесь

Я не уверен, как отобразить изображение из ответа в представлении Imageпоскольку ответ не является сетевым образом с URL или локальным файлом.

1 Ответ

0 голосов
/ 10 июня 2018

API фотографий возвращает изображение, подобное этому: https://lh4.googleusercontent.com/-1wzlVdxiW14/USSFZnhNqxI/AAAAAAAABGw/YpdANqaoGh4/s1600-w400/Google%2BSydney

, которое вы можете использовать в компоненте Image, как если бы вы использовали любое другое сетевое изображение: 

<Image
  style={styles.image}
  source={{
    uri:'https://lh4.googleusercontent.com/-1wzlVdxiW14/USSFZnhNqxI/AAAAAAAABGw/YpdANqaoGh4/s1600-w400/Google%2BSydney'
  }}
/>

Я думаю, чтопроблема в вашем случае заключается в том, что ваш ответ не является реальным изображением, я имею в виду, что если вы нажмете его в браузере, вы не увидите изображения, только некоторые закодированные данные изображения.Попробуйте добавить в свой ответ несколько заголовков типов контента, и посмотрите, будет ли это работать: 

Content-Type: image/svg+xml
...