如何在图片中使用数据URL？

Question

我有下面的图像，我将数据URL传递到其中，并且我尝试了两种方法：

[image {:source data-url}]

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

在两种情况下，我都会收到错误：“失败的道具类型：提供给图像的道具资源无效。”我究竟做错了什么？

Answer 1

您的导入方式错误，本机，您可以通过这种方式从目录和url获取图像

<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 />

这里是链接，您可以从官方文档中查看

https://reactnative.dev/docs/image