TypeError: undefined is not an object (evaluating 'asset.scales')

I'm pretty new to React Native, but I'm trying to add a png as a background image using the ImageBackground component. I have the png in an "assets" folder in my project directory. When I run the app with Expo on my iPhone, I get this error: TypeError: undefined is not an object (evaluating 'asset.scales')

This is my code:

import React, {useState, Component} from 'react';
import {StyleSheet, Text, View, TextInput, TouchableOpacity, Image} from 'react-native';
import * as Font from "expo-font";
import {ImageBackground} from "react-native-web";

class LoginPage extends Component {

    state = {
        fontLoaded: false,
    };


    async componentDidMount() {
        await Font.loadAsync({
            'Veles-Regular' : require("./assets/fonts/Veles-Regular.otf"),
        });
        console.log('HI');
        this.setState({fontLoaded: true});
    }


    render() {
        return (
            <ImageBackground source={require('./assets/login_splash.png')} style={{width: 100, height: 100}}>
                <View style={styles.loginScreen}>
                    <View style={{flex: 1, justifyContent: 'center'}}>
                        {
                            this.state.fontLoaded ? (
                                <Text style={{fontSize: 60, color: 'white', fontFamily: 'Veles-Regular'}}>App Name</Text>
                            ) : null
                        }
                    </View>
                    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center', width: '85%'}}>
                        <TextInput style={[styles.loginInput, {marginBottom: 5}]} placeholder=' username'
                                   placeholderTextColor={'rgba(255,255,255,0.3)'} textAlign='center'/>
                        <TextInput style={[styles.loginInput, {marginTop: 5, marginBottom: 5}]} placeholder=' password'
                                   placeholderTextColor={'rgba(255,255,255,0.3)'} textAlign='center'/>
                        <View style={{height: 15}}/>
                        <TouchableOpacity onPress={() => {
                        }}>
                            <Text style={{color: 'white', fontWeight: 'bold', fontSize: 24}}>Log in</Text>
                        </TouchableOpacity>
                    </View>
                    <View style={{flex: 2, justifyContent: 'center'}}>
                        <View style={{flex: 9}}/>
                        <Text style={{flex: 1, fontSize: 24, color: 'white', textAlign: 'center'}}>Don't have an
                            account?</Text>
                        <TouchableOpacity style={{color: 'white', fontWeight: 'bold', fontSize: 24}}>
                            <Text style={{color: 'white', fontWeight: 'bold', fontSize: 24, textAlign: 'center'}}>Sign
                                Up</Text>
                        </TouchableOpacity>
                        <View style={{height: 30}}/>
                    </View>
                </View>
            </ImageBackground>
        );
    }
}


const styles = StyleSheet.create({
    loginScreen: {
        flex: 1,
        paddingTop: 50,
        alignItems: 'center',
        justifyContent: 'center',
    },
    loginInput: {
        width: '100%',
        backgroundColor: 'rgb(40,40,40)',
        height: 44,
        fontSize: 24,
        color: 'white',
        borderWidth: 1,
        borderColor: 'rgb(60,60,60)',
        borderRadius: 25
    },
});

export default LoginPage;