local image is being returned as an integer - React Native

Question

I'm trying to display a local image in my react native app. The docs say the way that you do this is by doing something like

<Image source={require('./my-icon.png')} />;

This works on its own, however I'm trying to pass this in as conditional logic if the api I'm getting data back from has a null url object.

<Image source={{uri: article.urlToImage || require("./awaiting.png")}}/>

When I do this I'm getting 'JSON value of '1' of type NSNumber cannot be converted to a valid URL'.

It seems to not like a combination of

<Image source={{uri: article.urlToImage }}/>

and

<Image source={require('./awaiting.png')} />

Can anyone help?

Thanks

Catechism

Answer 1

Thanks for the help, the above solution didn't work but it let me on my way to this which does work

        <Image source={urlToImage ? { uri: urlToImage } : require("./awaiting.png")}/>

Catechism

Answer 2

I think the issue is that you cannot pass the result of require() as the URI in an object. Instead try:

<Image source={urlToImage ? { uri: urlToImage } || require("./awaiting.png")}/>

Bernal

Answer 3

I think A. Goodale might be correct. But if for some reason the lambda expression doesn't work then try separating into a function. I believe the lambda should work.

Interoceptor