Spaces and newlines not supported in base64 encoded images

[gavrilikhin-d]

Description

When you use base64 encoded images like that

<Image style={styles.image} source={{ uri: `data:image/png;base64,${data}` }} />

if your base64 encoded data contains \r, \n, \r\n, or any other space character, then your app assumes it should be a file:

Could not find image file:///<long path>.app/data:image/png%3Bbase64,<escaped data>.png

Seems like a regression in latest versions, because in 0.69 there were no such problem

React Native Version

0.71.6

Output of npx react-native info

info Fetching system and libraries information...
System:
    OS: macOS 13.2.1
    CPU: (8) arm64 Apple M1
    Memory: 109.64 MB / 8.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 19.6.0 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.4.0 - /opt/homebrew/bin/npm
    Watchman: 2023.02.13.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
    Android SDK: Not Found
  IDEs:
    Android Studio: 2022.1 AI-221.6008.13.2211.9514443
    Xcode: 14.2/14C18 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.18 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0 
    react-native: 0.71.3 => 0.71.3 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

1. Take a valid base64 encoded image without newlines or spaces
2. Check that you can see it with <Image style={styles.image} source={{ uri }} />
3. Add newlines or spaces in base64 encoded data => error on both ios and android

Snack, code example, screenshot, or link to a repository

import { StyleSheet, Image, View } from 'react-native';

export default function App() {
  const uri = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAC4lBMVEUAAABh2fpk4v9h2vth2/xh2fth2vph2vxg2vtj2fp+/99i2vtt3fpi2vxg2vpk4vph2/tg2fpi2fyM2tNa3fxg2fte2fpX2vhj2/tj2Plg2/xe3flo1P9h2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2fph2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2/xh2vth2vth2vth2vth2vth2vtg2fth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2vth2/th2vv////ZYyFdAAAA9HRSTlMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADJ5PwZ4MDHOubDVlSMll9iztcgukq4NBTery0HMtj0KpJEIv3GI2+GQEGq7BwnB6O9LYL69x5QrbJogOajsfX7tH4SfJ9/C1/Dp7tPAqR4CAqDZ0YNo5ARi5c/QAdymRxx0rRhfG5tuHUpmVNpc4jwSsTrgXVIp56JT+5mKqkb0rJ6PhVWNUMoXQ3pEdhZad81JE932jjSL43ULAqcP3okRpQFtusbEKHItJGcZ1gwhFD4zk7QaIq9eDmVXNk8DLKFMKjg7h5hzskijWWFYb4JrVk18JoACbLPUwAAAAAFiS0dE9UXSG9sAAAAJcEhZcwAAOw4AADsOAcy2oYMAAAAHdElNRQfkBgwKLzcjoaGYAAAC9UlEQVQ4y2NggABGJlk5OXkFZgYGZgV5OUUlFlYGVMCsrKKqpq6hycyspa2jq6dvwIwmz2xoZGxiamYub2FpZa1gY2vHxo6qwN7BkZmB2djJ2cXVDchw9/BENYLZy9sdKM4s7+Prxwxk+Ad4oSmwDwSZoBUUHKwSAmSEBtijKuDgDAu2CY+IjIqOiVWLiPOKT+BCUcBskmiblJySmuYNBD7pGZlJWdk5CBXMuRF5+QXphUXFRQolJSalZe7R6eUVdrKVUCXMJaFV1TW1gXWu9V4NjY1NXmbNLQGtbZEp7SUQFcwdnV0mzMyO3Z09vX1fvuj19ndOkGNmVpjYOQmsgJsnQYMX6PDJU6byTZv+5cv0aWwzpkwGCjDOTOAXgATiLGCoMJv69inMnvPly5zZCnN9TYECJvPCBAXAVkTozK8VYl6QobPQc1Fq6iLPxSlLZjJzLI3vtIC4gU14mbfK8hXmpSuTVykoKysszYxerW+xxnztOhGYN5jXt+tt2Ji3wHfT5sTEzVt8nabO2Zq8rZYZKayYFbaUa/RZzikzNy+bo6KnXRG2nRU1KHfs3MJssstpt1/b7j17FZij9+3HiM0DQIf31h9Urd8LiqxML2zRDfRQVFQ/iHb3RldgoifHzMY8We/QYb0jzMzMRw+iJRhRZsXDx46fqMjKbt1Z0a55zDueGT1RntyZfyq56DQzs3FokM4GvTNo8kAVxqambhxAYQ6xsz3nepHlmT0jVqw4b4JuZKUCzBbmOIcLiy6eQE/nl5bDkiXz5anbmZdd8Wy4WmQqfm3a9RvXmCcfXXlzov6t29AEc3nWney6qb2Gjn7ad460LLs78ezdEzca73lEQJMlc/iSSPOd9x/UPzz/yHFpy/XHT+4FS0hKgcyFWWG7PvTx7Z6nNcueJW5budRp5TrtSmkZJAVnmr2uPX9x7cJL2Vdur99obTm6S/vtu1etRusUoFbYHLvNbPCeM7ww2N9z6Yf4xR+ZL3+aef5z0SeQEQD3NgVcYcTe6gAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMC0wNi0xMlQxMDo0Nzo1NCswMDowMOLjIDsAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjAtMDYtMTJUMTA6NDc6NTQrMDA6MDCTvpiHAAAAIHRFWHRzb2Z0d2FyZQBodHRwczovL2ltYWdlbWFnaWNrLm9yZ7zPHZ0AAAAYdEVYdFRodW1iOjpEb2N1bWVudDo6UGFnZXMAMaf/uy8AAAAYdEVYdFRodW1iOjpJbWFnZTo6SGVpZ2h0ADUxMo+NU4EAAAAXdEVYdFRodW1iOjpJbWFnZTo6V2lkdGgANTEyHHwD3AAAABl0RVh0VGh1bWI6Ok1pbWV0eXBlAGltYWdlL3BuZz+yVk4AAAAXdEVYdFRodW1iOjpNVGltZQAxNTkxOTU4ODc07t6mCAAAABN0RVh0VGh1bWI6OlNpemUANDEzNzVCQlDBGGsAAABYdEVYdFRodW1iOjpVUkkAZmlsZTovLy4vdXBsb2Fkcy81Ni9OdnZWb1E1LzI0MTUvcmVhY3Rfb3JpZ2luYWxfd29yZG1hcmtfbG9nb19pY29uXzE0NjM3NS5wbmcvCeAIAAAAAElFTkSuQmCC";
  const uri_with_newline = uri.slice(0, 100) + "\r\n" + uri.slice(100);
  return (
    <View style={styles.container}>
      <Image style={styles.image} source={{ uri }}/>
      <Image style={styles.image} source={{ uri: uri_with_newline }}/>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  image: {
    width: 32,
    height: 32,
  }
});

[github-actions[bot]]

:warning:

Newer Version of React Native is Available!

:information_source:

You are on a supported minor version, but it looks like there's a newer patch available. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[mklb]

Had the same issue in "react-native": "^0.71.0". Tested with latest "react-native": "^0.71.6". Issue is still there.

[mklb]

My image data strings come from a backend and worked in all versions before. Current workaround is {uri: r.img.replace(/(\r\n|\n|\r)/gm, '')}

[gavrilikhin-d]

Yes, we do the same thing. The issue is not that big, but it's very hard to understand the problem judging by the error message alone

[joshua-revolutions]

Thanks @mklb

You will also need to replace spaces so I recommend

img.replace(/(\r\n|\n|\r|\s)/gm, '')

[grinisoufyane]

I have react native 0.72.3 and still have the same issue With Image not reading Base64 decoded same code with 0.69.9 work just fine

[nobi1007]

Weirdly I encountered this issue only in iOS as android was rendering the image perfectly, thanks @mklb & @joshua-revolutions though!

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[ahmedawaad1804]

My image data strings come from a backend and worked in all versions before. Current workaround is {uri: r.img.replace(/(\r\n|\n|\r)/gm, '')}

you made my day

[react-native-bot]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.