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.
javascript react-native
edited Jan 20 at 7:01
miladsolgi
59111
asked Jan 19 at 18:31
DreamlandDreamland
132
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.
javascript react-native
edited Jan 20 at 7:01
miladsolgi
59111
asked Jan 19 at 18:31
DreamlandDreamland
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 needsuper(props)in a constructor otherwisethis.propswill 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 removingexport defaultfrom 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.
javascript react-native
edited Jan 20 at 7:01
miladsolgi
59111
asked Jan 19 at 18:31
DreamlandDreamland
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
javascript react-native
edited Jan 20 at 7:01
miladsolgi
59111
asked Jan 19 at 18:31
DreamlandDreamland
132
edited Jan 20 at 7:01
miladsolgi
59111
asked Jan 19 at 18:31
DreamlandDreamland
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
59111
asked Jan 19 at 18:31
DreamlandDreamland
132
asked Jan 19 at 18:31
DreamlandDreamland
132
asked Jan 19 at 18:31
DreamlandDreamland
132
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 needsuper(props)in a constructor otherwisethis.propswill 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 removingexport defaultfrom 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 needsuper(props)in a constructor otherwisethis.propswill 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 removingexport defaultfrom 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
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
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
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
answered Jan 19 at 18:44
AndrewAndrew
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
sfratinisfratini
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
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
answered Jan 19 at 18:44
AndrewAndrew
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
answered Jan 19 at 18:44
AndrewAndrew
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
answered Jan 19 at 18:44
AndrewAndrew
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
answered Jan 19 at 18:44
AndrewAndrew
3,51911026
edited Jan 19 at 18:56
answered Jan 19 at 18:44
AndrewAndrew
3,51911026
answered Jan 19 at 18:44
AndrewAndrew
3,51911026
answered Jan 19 at 18:44
AndrewAndrew
3,51911026
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
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
sfratinisfratini
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
sfratinisfratini
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
sfratinisfratini
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
sfratinisfratini
6,26422147
answered Jan 19 at 23:38
sfratinisfratini
6,26422147
answered Jan 19 at 23:38
sfratinisfratini
6,26422147
answered Jan 19 at 23:38
sfratinisfratini
6,26422147
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
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 |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
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 otherwisethis.propswill 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 defaultfrom both components, and at the bottom, `export { CustomComponent, App }– stever
Jan 19 at 18:54