如何在 React Native Expo 上显示字节数组图像？答案

【问题标题】：How can I display a byte-array image on React Native Expo?如何在 React Native Expo 上显示字节数组图像？
【发布时间】：2020-12-22 01:39:34
【问题描述】：

我可以在 Swagger 上查看 byte-array 图像，但在 React Native 上看不到。我已尝试将其转换为 base64 并且可以正常工作，但我想知道如何在 byte-array 中显示它。

这是我的后端端点，使用 spring-boot

@GetMapping(value = "/{id}", produces = { "image/jpg", "image/jpeg", "image/png" })
public ResponseEntity<Resource> getImage(@PathVariable final UUID id){
    final User user =  userService.findById(id).orElseThrow(() -> new ResourceNotFoundException("User Not Found."));
    Optional<Image> image = imageService.findByUser(user);
    if(image.isPresent()) {
        byte[] bytes = Files.readAllBytes(Paths.get(image.get().getSignDocPath()));
        return ResponseEntity.ok().body(new ByteArrayResource(bytes));
    }
}

这就是我在 React Native 上显示图像的方式

<Image
  source={{ uri: imageItem.url }}
  style={styles.imagePreview}
/>

【问题讨论】：

标签： arrays spring-boot react-native expo

【解决方案1】：

你不能在 React Native 中更好地显示字节数组，最好是在后端将字节数组转换为 base64，然后在 React Native 中使用它。

如何在Java中将字节数组转换为Base64？

Java 8+

编码或解码字节数组：

byte[] encoded = Base64.getEncoder().encode("Hello".getBytes());
println(new String(encoded));   // Outputs "SGVsbG8="

byte[] decoded = Base64.getDecoder().decode(encoded);
println(new String(decoded))    // Outputs "Hello"

或者如果你只想要字符串：

String encoded = Base64.getEncoder().encodeToString("Hello".getBytes());
println(encoded);   // Outputs "SGVsbG8="

String decoded = new String(Base64.getDecoder().decode(encoded.getBytes()));
println(decoded)    // Outputs "Hello"

Java

Base64 codec = new Base64();
byte[] encoded = codec.encode("Hello".getBytes());
println(new String(encoded));   // Outputs "SGVsbG8="

byte[] decoded = codec.decode(encoded);
println(new String(decoded))    // Outputs "Hello"

或者如果你只想要字符串：

Base64 codec = new Base64();
String encoded = codec.encodeBase64String("Hello".getBytes());
println(encoded);   // Outputs "SGVsbG8="

String decoded = new String(codec.decodeBase64(encoded));
println(decoded)    // Outputs "Hello"

了解更多信息。 Follow

【讨论】：

我已经测试过 base64 及其工作。只是由于base64的大尺寸，我需要提供字节数组图像

【解决方案2】：

你可以用这个：

const getImageSource = () => {
    return `data:image/jpeg;base64,${source}`
}

<Image style = {styles.image} source = {{uri: getImageSource()}}/>

【讨论】：