React Native app Image does not appears in Chrome browser and GitHub link with Network Images on device

Admin 1
Viewed 381

I'm trying to figure out with images in React Native <Image source={require('./assets/favicon.png')} /> and Network Images according Docs Static Image Resources:

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 shows default icon.png on device, but in Chrome browser console shows Image: /static/media/favicon.608e4d9d.png, updates text and background color, but image does not appears, even default icon, showing this in console, not sure if related:

Cannot record touch end without a touch start. Touch End: {"identifier":0,"pageX":709,"pageY":185,"timestamp":1807.0799999986775} Touch Bank: []

With Network Images works fine on device with Expo Client for https://reactjs.org/logo-og.png or random picture https://picsum.photos/200/300 links:

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

but nothing on screen for same size or even less 15.7 KB image from GitHub link like:

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

My Node.js version is 14.15.1 and here is application 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
}
expo react-native reactjs google-chrome
1 Answers

When you use 'require,' it returns a number generated by the Metro’s asset loader, and the browser does not like that.

Do it this way:

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

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

However, Image.resolveAssetSource is not supported on the web. So you can do this:

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

I got it from: https://github.com/expo/expo/issues/10737#issuecomment-772587125

user_141736220
Related