Unable to load image when passing it as a prop

I trying to create a custom component that accepts an image uri as a property.
When calling this component, I want to pass different uri to this component such that it displays different images.

When i do this, I did not receive any error, but the images did not load(its just blank space there).

I have tried passing the URI directly into the component and the images load properly. However, when I go back to passing the uri as a prop, the image simply won't load

export default class CustomComponent extends Component {

    constructor(props){

        super(props);

}

render(){

    return(

        <View>

            <ImageBackground source = {{uri: this.props.imageSource}} style = {{width:100, height:100}}/>

        <View>



    );

}



export default class App extends Component {

    render(){

        return(

            <CustomComponent imageSource ='https://vignette.wikia.nocookie.net/moderncombatgames/images/0/0d/Chicken_Rice.png/revision/latest?cb=20151231093652'/>

);

}

I expected the image to load, but it doesn't.

edited Jan 20 at 7:01

miladsolgi

59111

asked Jan 19 at 18:31

Dreamland

132

Do you need the props in the constructor and calling super? If you have constructor() and no super does it work?

– Matthew Page
Jan 19 at 18:39

They don't need a constructor as they are not initializing state or binding functions. You need super(props) in a constructor otherwise this.props will be undefined in the constructor. reactjs.org/docs/react-component.html#constructor.

– Andrew
Jan 19 at 18:50

Is this one file? You cannot have two export defaults in the same file. Try removing export default from both components, and at the bottom, `export { CustomComponent, App }

– stever
Jan 19 at 18:54

add a comment |

I trying to create a custom component that accepts an image uri as a property.
When calling this component, I want to pass different uri to this component such that it displays different images.

When i do this, I did not receive any error, but the images did not load(its just blank space there).

I have tried passing the URI directly into the component and the images load properly. However, when I go back to passing the uri as a prop, the image simply won't load

export default class CustomComponent extends Component {

    constructor(props){

        super(props);

}

render(){

    return(

        <View>

            <ImageBackground source = {{uri: this.props.imageSource}} style = {{width:100, height:100}}/>

        <View>



    );

}



export default class App extends Component {

    render(){

        return(

            <CustomComponent imageSource ='https://vignette.wikia.nocookie.net/moderncombatgames/images/0/0d/Chicken_Rice.png/revision/latest?cb=20151231093652'/>

);

}

I expected the image to load, but it doesn't.

edited Jan 20 at 7:01

miladsolgi

59111

asked Jan 19 at 18:31

Dreamland

132

Do you need the props in the constructor and calling super? If you have constructor() and no super does it work?

– Matthew Page
Jan 19 at 18:39

They don't need a constructor as they are not initializing state or binding functions. You need super(props) in a constructor otherwise this.props will be undefined in the constructor. reactjs.org/docs/react-component.html#constructor.

– Andrew
Jan 19 at 18:50

Is this one file? You cannot have two export defaults in the same file. Try removing export default from both components, and at the bottom, `export { CustomComponent, App }

– stever
Jan 19 at 18:54

add a comment |

I trying to create a custom component that accepts an image uri as a property.
When calling this component, I want to pass different uri to this component such that it displays different images.

When i do this, I did not receive any error, but the images did not load(its just blank space there).

I have tried passing the URI directly into the component and the images load properly. However, when I go back to passing the uri as a prop, the image simply won't load

export default class CustomComponent extends Component {

    constructor(props){

        super(props);

}

render(){

    return(

        <View>

            <ImageBackground source = {{uri: this.props.imageSource}} style = {{width:100, height:100}}/>

        <View>



    );

}



export default class App extends Component {

    render(){

        return(

            <CustomComponent imageSource ='https://vignette.wikia.nocookie.net/moderncombatgames/images/0/0d/Chicken_Rice.png/revision/latest?cb=20151231093652'/>

);

}

I expected the image to load, but it doesn't.

edited Jan 20 at 7:01

miladsolgi

59111

asked Jan 19 at 18:31

Dreamland

132

I trying to create a custom component that accepts an image uri as a property.
When calling this component, I want to pass different uri to this component such that it displays different images.

When i do this, I did not receive any error, but the images did not load(its just blank space there).

I have tried passing the URI directly into the component and the images load properly. However, when I go back to passing the uri as a prop, the image simply won't load

export default class CustomComponent extends Component {

    constructor(props){

        super(props);

}

render(){

    return(

        <View>

            <ImageBackground source = {{uri: this.props.imageSource}} style = {{width:100, height:100}}/>

        <View>



    );

}



export default class App extends Component {

    render(){

        return(

            <CustomComponent imageSource ='https://vignette.wikia.nocookie.net/moderncombatgames/images/0/0d/Chicken_Rice.png/revision/latest?cb=20151231093652'/>

);

}

I expected the image to load, but it doesn't.

javascript react-native

edited Jan 20 at 7:01

miladsolgi

59111

asked Jan 19 at 18:31

Dreamland

132

edited Jan 20 at 7:01

miladsolgi

59111

asked Jan 19 at 18:31

Dreamland

132

edited Jan 20 at 7:01

miladsolgi

59111

edited Jan 20 at 7:01

miladsolgi

59111

edited Jan 20 at 7:01

miladsolgi

59111

asked Jan 19 at 18:31

Dreamland

132

asked Jan 19 at 18:31

Dreamland

132

asked Jan 19 at 18:31

Dreamland

132

Do you need the props in the constructor and calling super? If you have constructor() and no super does it work?

– Matthew Page
Jan 19 at 18:39

They don't need a constructor as they are not initializing state or binding functions. You need super(props) in a constructor otherwise this.props will be undefined in the constructor. reactjs.org/docs/react-component.html#constructor.

– Andrew
Jan 19 at 18:50

Is this one file? You cannot have two export defaults in the same file. Try removing export default from both components, and at the bottom, `export { CustomComponent, App }

– stever
Jan 19 at 18:54

add a comment |

Do you need the props in the constructor and calling super? If you have constructor() and no super does it work?

– Matthew Page
Jan 19 at 18:39

They don't need a constructor as they are not initializing state or binding functions. You need super(props) in a constructor otherwise this.props will be undefined in the constructor. reactjs.org/docs/react-component.html#constructor.

– Andrew
Jan 19 at 18:50

Is this one file? You cannot have two export defaults in the same file. Try removing export default from both components, and at the bottom, `export { CustomComponent, App }

– stever
Jan 19 at 18:54

Do you need the props in the constructor and calling super? If you have constructor() and no super does it work?

– Matthew Page
Jan 19 at 18:39

They don't need a constructor as they are not initializing state or binding functions. You need super(props) in a constructor otherwise this.props will be undefined in the constructor. reactjs.org/docs/react-component.html#constructor.

– Andrew
Jan 19 at 18:50

Is this one file? You cannot have two export defaults in the same file. Try removing export default from both components, and at the bottom, `export { CustomComponent, App }

– stever
Jan 19 at 18:54

add a comment |

2 Answers
2

active

oldest

votes

I just tried your code and it appears to work.

I put your CustomComponent into its own file CustomComponent.js and imported it into the App.js.

Here is a snack with the code working https://snack.expo.io/SJgTkxbQ4

edited Jan 19 at 18:56

answered Jan 19 at 18:44

Andrew

3,51911026

Okay issues solved! Thank you!!

– Dreamland
Jan 20 at 3:48

add a comment |

You are exporting 2 classes. Remove the first export default in CustomClass. You only need it internally and you only need to export the App class.

If these are 2 files, please post them completely.

answered Jan 19 at 23:38

sfratini

6,26422147

Yes these are 2 files, sorry about that, didnt know how to post in 2 files. Thanks!

– Dreamland
Jan 20 at 3:49

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54270144%2funable-to-load-image-when-passing-it-as-a-prop%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

I just tried your code and it appears to work.

I put your CustomComponent into its own file CustomComponent.js and imported it into the App.js.

Here is a snack with the code working https://snack.expo.io/SJgTkxbQ4

edited Jan 19 at 18:56

answered Jan 19 at 18:44

Andrew

3,51911026

Okay issues solved! Thank you!!

– Dreamland
Jan 20 at 3:48

add a comment |

I just tried your code and it appears to work.

I put your CustomComponent into its own file CustomComponent.js and imported it into the App.js.

Here is a snack with the code working https://snack.expo.io/SJgTkxbQ4

edited Jan 19 at 18:56

answered Jan 19 at 18:44

Andrew

3,51911026

Okay issues solved! Thank you!!

– Dreamland
Jan 20 at 3:48

add a comment |

I just tried your code and it appears to work.

I put your CustomComponent into its own file CustomComponent.js and imported it into the App.js.

Here is a snack with the code working https://snack.expo.io/SJgTkxbQ4

edited Jan 19 at 18:56

answered Jan 19 at 18:44

Andrew

3,51911026

I just tried your code and it appears to work.

I put your CustomComponent into its own file CustomComponent.js and imported it into the App.js.

Here is a snack with the code working https://snack.expo.io/SJgTkxbQ4

edited Jan 19 at 18:56

answered Jan 19 at 18:44

Andrew

3,51911026

edited Jan 19 at 18:56

answered Jan 19 at 18:44

Andrew

3,51911026

answered Jan 19 at 18:44

Andrew

3,51911026

answered Jan 19 at 18:44

Andrew

3,51911026

Okay issues solved! Thank you!!

– Dreamland
Jan 20 at 3:48

add a comment |

Okay issues solved! Thank you!!

– Dreamland
Jan 20 at 3:48

Okay issues solved! Thank you!!

– Dreamland
Jan 20 at 3:48

add a comment |

You are exporting 2 classes. Remove the first export default in CustomClass. You only need it internally and you only need to export the App class.

If these are 2 files, please post them completely.

answered Jan 19 at 23:38

sfratini

6,26422147

Yes these are 2 files, sorry about that, didnt know how to post in 2 files. Thanks!

– Dreamland
Jan 20 at 3:49

add a comment |

You are exporting 2 classes. Remove the first export default in CustomClass. You only need it internally and you only need to export the App class.

If these are 2 files, please post them completely.

answered Jan 19 at 23:38

sfratini

6,26422147

Yes these are 2 files, sorry about that, didnt know how to post in 2 files. Thanks!

– Dreamland
Jan 20 at 3:49

add a comment |

You are exporting 2 classes. Remove the first export default in CustomClass. You only need it internally and you only need to export the App class.

If these are 2 files, please post them completely.

answered Jan 19 at 23:38

sfratini

6,26422147

You are exporting 2 classes. Remove the first export default in CustomClass. You only need it internally and you only need to export the App class.

If these are 2 files, please post them completely.

answered Jan 19 at 23:38

sfratini

6,26422147

answered Jan 19 at 23:38

sfratini

6,26422147

answered Jan 19 at 23:38

sfratini

6,26422147

answered Jan 19 at 23:38

sfratini

6,26422147

Yes these are 2 files, sorry about that, didnt know how to post in 2 files. Thanks!

– Dreamland
Jan 20 at 3:49

add a comment |

Yes these are 2 files, sorry about that, didnt know how to post in 2 files. Thanks!

– Dreamland
Jan 20 at 3:49

Yes these are 2 files, sorry about that, didnt know how to post in 2 files. Thanks!

– Dreamland
Jan 20 at 3:49

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Brtdku