javascript - react-native bilder med mellanslag i namnet laddas inte

Jag försöker använda en bild i min React Native-app.

Jag har mycket lite kod vid det här laget

Detta är all kod jag har för tillfället

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;

Var ImageCircle är detta

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;

Jag kan inte se min bild i cirkeln (eller någon annanstans).

I konsolen finns det den här ena loggen

Asset not found: /Users/varunb/Desktop/project-emma/src/assests/images/avatars/Allan%[email  for platform: ios

Kan någon berätta för mig varför jag inte kan se bilden på min iPhone och varför jag får detta fel? och hur man åtgärdar det?

Ps: Om jag tar bort mellanslag från bildimporten (och byter namn på bilden också), fungerar allt bra, alltså

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

Detta är vad jag kan se på iPhone (med mellanslag i importen)

Svar #1

Jag hoppas att den här koden hjälper dig

fel format:

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

Det finns två typer av renderingsbildstilar

<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',
        }}
      />

I ditt fall

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

Om du fortfarande inte renderar bilden kan du använda FastImage istället för att använda Image

Efter npm install react-native-fast-image kan du använda FastImage

Vänligen kontrollera denna url https://github.com/DylanVann/react-native-fast-image

Det kan fungera korrekt