Converting image bytes to base64 in React Native: A step-by-step guide

Question

Converting image bytes to base64 in React Native: A step-by-step guide

When requesting the product image from the backend, I want to show it to the user.

The issue is: the API response contains a PNG image if the product has an image, but returns a (204 NO Content) if the product does not have an image. So, I need to display a default image in that case.

After some research, I found the defaultSource prop for the <Image> component, which works fine on IOS but not on Android.

<Image
          defaultSource={{ uri: productDefaultImage }}
          source={{
            uri: env.apiUrl.concat(env.productImageById.replace(":productId", price.id.toString())).concat("?thumbnail=true"), headers: { Authorization: `Bearer ${token}`}
          }}
          resizeMode="contain"
          style={{ width: 100, height: 70 }}
          onLoadEnd={() => setImageLoading(false)}
        />

Here are some of the returned data from the API:

�PNG


IHDRww^��   pHYs��IDATx^����wu���9u��=9g͌rH ���1x�1��YG���kÚ�/�ؘl�,!��F��g:��ʹ�����ww�y�����6�����tW=ϭ�{���sϑ�;v���#`G���;v���#`G���;v���#`G���;v���#` ...

Is there a way to display the default image on Android as well?

javascript reactjs typescript react-native expo

Answer 1

Answer №1

let xyz = picture.encodeAsString("base64");

Answer 2

let xyz = picture.encodeAsString("base64");

Answer 3

Answer №2

By moving your URI into a piece of state, you can utilize the onError callback to assign the URI to your default URL (check out this demo):

import React, { useState } from 'react';
import { Text, View, StyleSheet, Image } from 'react-native';
import Constants from 'expo-constants';
import { TextInput } from 'react-native-paper';

const defaultSrc =
  'https://media.istockphoto.com/id/1271122894/photo/planet-earth-from-the-space-at-night.jpg?s=612x612&w=0&k=20&c=PU-_OdSqlMs47X3FKQQBEruZcI38QJ4XLPpYi9b7dJ4=';

export default function App() {
  const [url, setUrl] = useState('');
  const [text, setText] = useState('');
  const [hasImageErr,setHasImgErr] = useState(false)
  return (
    <View style={styles.container}>
      <TextInput
        label="Paste a url"
        value={text}
        onChangeText={setText}
        right={
          <TextInput.Icon
            icon="check"
            color="green"
            onPress={() => setUrl(text)}
          />
        }
      />
      {hasImageErr &&<Text style={styles.errText}>Error loading image</Text>}
      <Image
        style={styles.image}
        source={{ uri: url }}
        onError={() => {
          if(!url)
            return
          console.log('Error loading image. Switching to default image')
          setUrl(defaultSrc)
          setHasImgErr(true)
        }}
        onLoad={()=>{
          // called when image loading succeeds
          if(defaultSrc !== url)
            setHasImgErr(false)
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  image:{
    margin:5,
    width:100,
    height:100,
    alignSelf:'center'
  },
  errText:{
    color:'red',
    alignSelf:'center'
    }
});

Answer 4

By moving your URI into a piece of state, you can utilize the onError callback to assign the URI to your default URL (check out this demo):

import React, { useState } from 'react';
import { Text, View, StyleSheet, Image } from 'react-native';
import Constants from 'expo-constants';
import { TextInput } from 'react-native-paper';

const defaultSrc =
  'https://media.istockphoto.com/id/1271122894/photo/planet-earth-from-the-space-at-night.jpg?s=612x612&w=0&k=20&c=PU-_OdSqlMs47X3FKQQBEruZcI38QJ4XLPpYi9b7dJ4=';

export default function App() {
  const [url, setUrl] = useState('');
  const [text, setText] = useState('');
  const [hasImageErr,setHasImgErr] = useState(false)
  return (
    <View style={styles.container}>
      <TextInput
        label="Paste a url"
        value={text}
        onChangeText={setText}
        right={
          <TextInput.Icon
            icon="check"
            color="green"
            onPress={() => setUrl(text)}
          />
        }
      />
      {hasImageErr &&<Text style={styles.errText}>Error loading image</Text>}
      <Image
        style={styles.image}
        source={{ uri: url }}
        onError={() => {
          if(!url)
            return
          console.log('Error loading image. Switching to default image')
          setUrl(defaultSrc)
          setHasImgErr(true)
        }}
        onLoad={()=>{
          // called when image loading succeeds
          if(defaultSrc !== url)
            setHasImgErr(false)
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  image:{
    margin:5,
    width:100,
    height:100,
    alignSelf:'center'
  },
  errText:{
    color:'red',
    alignSelf:'center'
    }
});

Converting image bytes to base64 in React Native: A step-by-step guide

Answer №1

Answer №2

Similar questions

How can I automatically refresh the page when switching languages using @shopify/react-i18n?

Error: The dataProvider function toJSON is not recognized

Identifying when a fetch operation has completed in vue.js can be accomplished by utilizing promises

Error occurred while trying to launch React application with "npm start" command due to ELIFECYCLE issue

Send submitted form field arrays to the database

Mastering Inter-Composable Communication in Vue 3: A Guide

CSS media query to target specific viewport width

find all the possible combinations of elements from multiple arrays

The React context is currently yielding an undefined value

Tips for creating useEffect logic to automatically close the menu when the URL changes

The Google Maps API allows all markers to be connected to a single infowindow

The ReactJS button produces component output when activated with props

Sequential execution not functioning properly in NodeJS Async series

Customizing the appearance of individual columns in the Material-UI DataGrid

When iterating over objects in JavaScript, the loop may return undefined, while using Lodash's map

The usage of the bootstrapTable() function creates a gap below the displayed table information

Add numerous submit buttons within a form. Upon clicking on a button, the form should be submitted to a specific URL using AJAX

The toggle checkbox feature in AngularJS seems to be malfunctioning as it is constantly stuck in the "off"

Vue.js Interval Functionality Malfunctioning

Learn how to implement React Redux using React Hooks and correctly use the useDispatch function while ensuring type-checking