将图像 URL 传递给 React Native 中的功能组件

Question

I want my avatar component to show the avatar with the URL passed to the component. So if I pass avatar1 it shows avatar1. I have tried several methods, but nothing seems to work.

My avatar component looks like this currently. I want to get rid of the static URL

export default function Avatar() {

  return (
    <Image source={require("../assets/avatar.png")} style={styles.avatarStyle} />
  );
}
const styles = StyleSheet.create({
  avatarStyle: {
    resizeMode: 'contain',
    height: "60%",
    alignSelf: "flex-start",
    position: "absolute",
    bottom: 0
  }
});

Answer 1

Probably you trying to pass this avatar1 via props so you need to use the props, passing it to the function

export default function Avatar({avatarUri}) {
    
      return (
        <Image source={{uri: avatarUri}} style={styles.avatarStyle} />
      );
    }
    const styles = StyleSheet.create({
      avatarStyle: {
        resizeMode: 'contain',
        height: "60%",
        alignSelf: "flex-start",
        position: "absolute",
        bottom: 0
      }
    });

https://reactnative.dev/docs/props

Answer 2

Make sure the next things:

• Image path check correct path
• You should add the width style param to the image, it is required to render.
• resizeMode it's a prop of Image, not a style param

Fixed style:

const styles = StyleSheet.create({
  avatarStyle: {
    height: "60%",
    width: 150, // FOR EXAMPLE
    alignSelf: "flex-start",
    position: "absolute",
    bottom: 0
  }
});

The complete code:

export default function Avatar() {

  return (
    <Image source={require("../assets/avatar.png")} style={styles.avatarStyle} resizeMode='contain'/>
  );
}
const styles = StyleSheet.create({
  avatarStyle: {
    height: "60%",
    width: 150, // FOR EXAMPLE
    alignSelf: "flex-start",
    position: "absolute",
    bottom: 0
  }
});