How to use data-url with images in re-natal?

Question

I have the following image that I pass a data-url into, and I've tried two ways:

[image {:source data-url}]

[image {:source {:uri data-url}}]

In both cases, I get the error: "Failed prop type: invalid prop source supplied to image." What am I doing wrong?

Answer 1

your are importing in wrong way, react-native, you can fetch image from directory and url in this way

<Image
          style={{width: 50, height: 50}}
          source={require('@expo/snack-static/react-native-logo.png')}
        />
        <Image
          style={{width: 50, height: 50}}
          source={{uri: 'https://reactnative.dev/img/tiny_logo.png'}}
        />
        <Image
          style={{width: 66, height: 58}}
          source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQS />

Here is the link, you may check from the official doc

https://reactnative.dev/docs/image