React Native应用程序Image不会出现在Chrome浏览器和设备上带有网络图像的GitHub链接中

Question

我正试图根据Docs静态图像资源：找出React Native<Image source={require('./assets/favicon.png')} />和网络图像中的图像

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, SafeAreaView, Image } from 'react-native';
export default function App() {
return (
<SafeAreaView style={styles.container}>
<Text>App</Text>
<Image source={require('./assets/favicon.png')} />
</SafeAreaView>
);
} 

Expo Client在设备上显示默认的icon.png，但在Chrome浏览器控制台中显示Image: /static/media/favicon.608e4d9d.png，更新文本和背景色，但图像没有显示，甚至是默认图标，在控制台中显示，不确定是否相关：

没有触摸开始就无法记录触摸结束。触摸结束：{"标识符"：0，"页面X"：709，"页面Y"：185，"时间戳"：1807.0799999986775}触摸银行：[]

对于https://reactjs.org/logo-og.png或随机图片https://picsum.photos/200/300链接，使用网络图像在具有Expo Client的设备上运行良好：

<Image source={{uri: 'https://picsum.photos/200/300'}}
style={{width: 400, height: 400}} />

但屏幕上没有相同大小甚至小于15.7 KB的GitHub链接图像，比如：

https://github.com/mygithub/myproject/blob/master/img/myimage.png

我的Node.js版本是14.15.1，这里是应用程序package.json:

{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"expo": "~39.0.2",
"expo-status-bar": "~1.0.2",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-39.0.4.tar.gz",
"react-native-web": "~0.13.12"
},
"devDependencies": {
"@babel/core": "~7.9.0"
},
"private": true
}

Answer 1

当您使用'require'时，它会返回Metro的资产加载器生成的数字，而浏览器不喜欢这样。

这样做：

import { Image } from 'react-native';
import exampleImage from './assets/images/example.png'
const exampleImageUri = Image.resolveAssetSource(exampleImage).uri
<Image source={{uri: exampleImageUri}} />

请阅读：https://medium.com/swlh/how-to-obtain-a-uri-for-an-image-asset-in-react-native-with-expo-88dfbe1023b8

但是，web上不支持Image.resolveAssetSource。所以你可以这样做：

import { Platform } from "react-native";
if (Platform.OS === "web"
Image.resolveAssetSource =  source => { uri: source }   
}

我从：https://github.com/expo/expo/issues/10737#issuecomment-772587125