名称中有空格的反应本机图像未加载

Question

我正在尝试在我的 react 本机应用程序中使用图像。

此时我的代码很少

这就是我现在拥有的所有代码

import React from 'react';
import { ScrollView, View, Text } from 'react-native';
import Image from '@src/assests/images/avatars/Allan Munger.png';
import { ImageCircle } from '@src/components/elements';

const App = () => {
  const [active, setActive] = React.useState(0);
  return (
    <View>
      <ImageCircle uri={Image} active={false} />
    </View>
  );
};

export default App;

ImageCircle 在哪里

import React from 'react';
import { View, Text, Image, ImageSourcePropType } from 'react-native';
import Styles from './styles';

const ImageCircle = ({ active, uri }) => {
  console.log('uri', uri);
  return (
    <View
      style={{
        width: 60,
        height: 60,
        borderRadius: 30,
        borderColor: 'red',
        borderWidth: 1,
      }}>
      <Image source={uri} width={60} height={60} />
    </View>
  );
};

export default ImageCircle;

我在圆圈中（或任何地方）看不到我的图像。

在控制台中，有这样一条日志

Asset not found: /Users/varunb/Desktop/project-emma/src/assests/images/avatars/Allan%20Munger@2x.png for platform: ios

谁能告诉我为什么我在 iPhone 上看不到图片以及为什么会出现此错误？以及如何解决？

Ps：如果我从图像导入中删除空间（并重命名图像），那么一切正常，即

import Image from '@src/assests/images/avatars/AllanMunger.png';

这是我在 iPhone 上看到的（导入时有空格）

Answer 1

希望这段代码对你有帮助

格式错误：

<Image source={uri} width={60} height={60} />

有两种渲染图像样式

<Image  style={styles.tinyLogo}
        source={require('@expo/snack-static/react-native-logo.png')}
      />
<Image  style={styles.tinyLogo}
        source={{
          uri: 'https://reactnative.dev/img/tiny_logo.png',
        }}
      />

你的情况

<Image source = {{uri: uri} width: {60} height:{60}}

如果还是不渲染图片，可以用FastImage代替Image

npm install react-native-fast-image 后，可以使用 FastImage

请查看此网址https://github.com/DylanVann/react-native-fast-image

它可以正常工作