Image not showing in React Native Web App. Appears when I build for Android or iOS but doesn't show when using react-scripts start

Question

I am trying to display an image in a React Native Web App which is run using react-scripts start. When I build the App for iOS or Android, the image appears perfectly fine (using expo) but when I build it for the Web App, the image fails to load. Here is the code snippet for the Home component where the image is loaded

import React from "react";
import { ScrollView, ActivityIndicator, StyleSheet, Image, ImageBackground } from "react-native";
import UserList from "./user-list";
import Header from './header';
import sanityClient from './assets/client' 
import BackButton from './back-button'
import User from './user'
// import {Asset} from 'expo-asset';

// const imageURI = Asset.fromModule(require('./arrow.png')).uri;

const image = require('./assets/aoeu.jpg');

class Home extends React.Component {
  state = {
    user: {},
    loading: true
  };

  componentDidMount() {
    // TODO: get users
    this.getUser();
  }

  async getUser() {
    sanityClient.fetch(`*[ _type == "user" && emailAddress.current == "[email protected]"]`)
      .then((data) => {
        console.log(data);
        this.setState({user: data[0], loading: false});
        console.log(this.state.user);
      })
      .catch((err) => console.error(err))
    // const res = await fetch("https://randomuser.me/api/?results=20");
    // const { results} = await res.json();
    // // console.log(results)
    // this.setState({users: [...results], loading: false});
  }

  render() {
    return (
      <ScrollView
        noSpacer={true}
        noScroll={true}
        style={styles.container}
        showVerticalSCrollIndicator = {false}
        showHorizontalScrollIndicator = {false}
      >
          {this.state.loading ? (
          <ActivityIndicator
            style={[styles.centering, styles.gray]}
            color="#5d38aa"
            size="large"
          />
        ) : (
          <View>
            <Header title={this.state.user.name} />
            <View>
              <Image
                source={require('./arrow.png')}
                style={styles.image}
              />
            </View>
            <User />
            
          </View>
        )}
      </ScrollView>
    );
  }
}

var styles = StyleSheet.create({
  container: {
    backgroundColor: "white",
    width: '375px',
    height: '812px',
    // top: '50px',
  },
  centering: {
    alignItems: "center",
    justifyContent: "center",
    padding: 8,
    height: '100vh'
  },
  image: {
    width: '50px',
    height: '50px',
    marginRight: 20,
    boxShadow: "0 1px 2px 0 rgba(0,0,0,0.1)"
  }
});

export default Home;

Here is a link to the GitHub repo where the entire project is stored https://github.com/nimbusdin/stackreactnative

Answer 1

Try to import this way and use it like this

import image = './assets/aoeu.jpg';
<Image
   source={image}
   style={styles.image}
/>