React Native Web Image 组件不显示图像

Question

我有一个图像组件，用于将图像加载到我的应用程序的标头中。我可以为图像应该在的位置创建边框，但无法正确加载图像。这是我加载图像的代码

import React from 'react';
import { SafeAreaView, View, Text, StyleSheet, Button, Image } from 'react-native';

class BackButton extends React.Component {
  
    render() {
        return (
            <Image source={require('./assets/images/arrow.png')} style={styles.image} />
        );
    }
}

var styles = StyleSheet.create({
    image: {
      width: '24px',
      height: '24px',
      borderWidth: 1
    }
  });

export default BackButton;

这是调用该组件的地方

import { SafeAreaView, View, Text, StyleSheet } from 'react-native';
import AppText from './assets/text/AppText'
import AppTextHeader from './assets/text/AppTextHeader'
import BackButton from './BackButton'

const Header = ({ onBack, title }) => (
  <SafeAreaView style={styles.headerContainer}>
    <View style={styles.header}>
      <View style={styles.headerLeft}>
        <BackButton/>  
      </View>    
      <View style={styles.headerCenter}>
        <AppTextHeader>
          {title}
        </AppTextHeader>
        {/* <Text accessibilityRole="heading" aria-level="3" style={styles.title}>{title}</Text> */}
      </View>
      <View style={styles.headerRight}/>
    </View>
  </SafeAreaView>
);

const styles = StyleSheet.create({
  header: {
    alignItems: 'center',
    flexDirection: 'row',
    minHeight: 76
  },
  headerCenter: {
    flex: 1,
    order: 2
  },
  headerLeft: {
    order: 1,
    width: 54,
    alignItems: 'center',
    justifyContent: 'center'
  },
  headerRight: {
    order: 3,
    width: 54
  },
});

export default Header;

是什么原因导致图像无法加载？

Answer 1

这是通过使用 import 而不是 require 修复的

import imgSrc from './arrow.png';

而不是

const imgSrc = require('./arrow.png');