try to bind images but it dont work

LeftOvers/components/ProfileElement.tsx

@@ -36,14 +36,12 @@ export default function ProfileElement(props : Profile) {
     }
 
     let imageSource
-    if (props.avatar == "plus.png"){
-        imageSource = require('../assets/images/plus.png')
-    }
-    else if (props.avatar == "plus_small.png"){
-        imageSource = require('../assets/images/plus_small.png')
+    if(props.avatar == null){
+        console.log("NUUUULLLLLE" + props.avatar)
     }
     else{
-        imageSource = require('../assets/images/logo.png')
+        imageSource = { uri: props.avatar };
+        console.log("MAAARCHHEEE" + props.avatar)
     }
 
     const styles = StyleSheet.create({

LeftOvers/screens/CreateProfile.tsx

@@ -31,9 +31,9 @@ export default function CreateProfile(props) {
           aspect: [4, 3],
           quality: 1,
         });
-    
+      
         console.log(result);
-    
+      
         if (!result.canceled) {
           setAvatar(result.assets[0].uri);
         }
@@ -42,13 +42,13 @@ export default function CreateProfile(props) {
 
     let imageSource
     if (props.avatar == "plus.png"){
-        imageSource = require('../assets/images/plus.png')
+        imageSource = {uri: avatar}
     }
     else if (props.avatar == "plus_small.png"){
-        imageSource = require('../assets/images/plus_small.png')
+        imageSource = {uri: avatar}
     }
     else{
-        imageSource = require('../assets/images/logo.png')
+        imageSource = {uri: avatar}
     }
 
     const handleCreateProfile = async () => {
@@ -169,7 +169,7 @@ export default function CreateProfile(props) {
                             </View>
                             <View style={styles.filterBar}>
                                 <Text style={styles.filters}>Filters</Text>
-                                <Text style={styles.nbSelected}>0 diets selected</Text>
+                                <Text style={styles.nbSelected}>"0 diets selected</Text>
                             </View>
                             <ListSelect title="Diets" content={die} setSelected={handleSelectedDiets}></ListSelect>
                             <View style={{marginTop: "6%"}}/>

LeftOvers/screens/Profiles.tsx

@@ -211,13 +211,12 @@ export default function Profiles({navigation, props}) {
                     <View style={styles.modal}>
                         <View style={styles.viewModal}>
                             <View style={styles.profileValidation}>
-                            <ProfileDelete name="Johnny Silverhand" avatar="plus_small.png" diets={die} allergies={all}></ProfileDelete>
-                                {/* <ProfileDelete
+                            {/* <ProfileDelete
                                     name={profiles[selectedProfileIndex].name}
                                     avatar={profiles[selectedProfileIndex].avatar}
                                     diets={profiles[selectedProfileIndex].diets}
                                     allergies={profiles[selectedProfileIndex].allergies}
-                                /> */}
+                            /> */}
                             </View>
                             <View style={styles.decisionBarVertical}>
                                 <Text style={styles.validationQuestion}>Do you really want to delete this profile?</Text>