Open gavrilikhin-d opened 1 year ago
: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. |
Had the same issue in "react-native": "^0.71.0"
. Tested with latest "react-native": "^0.71.6"
. Issue is still there.
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, '')}
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
Thanks @mklb
You will also need to replace spaces so I recommend
img.replace(/(\r\n|\n|\r|\s)/gm, '')
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
Weirdly I encountered this issue only in iOS as android was rendering the image perfectly, thanks @mklb & @joshua-revolutions though!
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.
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
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.
Description
When you use base64 encoded images like that
if your base64 encoded
data
contains\r
,\n
,\r\n
, or any other space character, then your app assumes it should be a file: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
Steps to reproduce
<Image style={styles.image} source={{ uri }} />
Snack, code example, screenshot, or link to a repository