отображать <Image>в react native, используя содержимое изображения, а не путь - PullRequest
Новая
       40

отображать <Image>в react native, используя содержимое изображения, а не путь

0 голосов
/ 16 июня 2020

Я пытаюсь отобразить изображение, используя <Image/> из react-native. Конечная точка построена с помощью Spring и записывает содержимое изображения в выходной поток. Конечная точка получает идентификатор изображения.

Если я выполню запрос от Postman, в результате я увижу изображение.

Мне было интересно искать решения, и я думаю, что это самое близкое, что мне удалось получить { ссылка }

Я видел в документации, что это может работать, если ответ закодирован с помощью base64, но я еще не дошел до этого и надеюсь, что смогу заставить его работать без этого. Изображение ничего не отображало. 

 LOG  resp => ����
 LOG  resp => 77+977+977+977+9
 LOG  resp => /f39/Q==

1 Ответ

0 голосов
/ 17 июня 2020

В итоге я создал конечную точку, которая извлекает закодированное изображение.

Код Spring: 

@GetMapping("/encoded-base64/{id}")
public Map<String, String> retrieveBase64EncodedImage(@PathVariable UUID id) {
    return singletonMap("data", imageService.findByIdAndEncode(id));
}

public String findByIdAndEncode(UUID id) {
    Image image = imageRepository.findById(id).orElseThrow();
    InputStream inputStream = storageService.get(image.getFilePath());
    try {
        byte[] bytes = FileCopyUtils.copyToByteArray(inputStream);
        return Base64.getEncoder().encodeToString(bytes);
    } catch (IOException e) {
        throw new RuntimeException("Cannot copy stream", e);
    }
}

Код React Native: 

  useEffect(() => {
    axios.getAsync(
      'path_to_server/encoded-base64/37d1302d-3ba2-4b4e-b08d-5323979abf38', 
    )
    .then(resp => {
      const data = resp.data.data
      console.log("resp => " + JSON.stringify(data));
      let imageUri = "data:image/jpeg;base64," + data;
      setSource({uri: imageUri})
    }) 
  }, []) 


  <Image
    style={styles.tinyLogo}
    source={source}
  />
...