local image is being returned as an integer - React Native

local image is being returned as an integer - React Native

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


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")}/>

image require variable problem · Issue #7015 · facebook/react-native, Here is what I do : I'm retrieving the image path as a string from Firebase datab. import React, {Component} from 'react'; import {Image} from 'react-native'; assets/img-5.png') ] } } render() { const { images } = this.state return  This example covers, fetching and displaying an image from network location using Image Component of react native. React native provides a unified media management system so developers can easily manage all the image files by placing them together into a single folder. So here is the complete step by step tutorial for Show Image from Local Resource Folder in react native.


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")}/>

Loading a local image using require() doesn't work · Issue #16909 , While the best physicists in the country struggled as a team to perfect a radically advanced weapon — Laura Fermi's picture of an exhausted Enrico Fermi is true  A React component for displaying different types of images, including network images, static resources, temporary local images, and images from local disk, such as the camera roll. This example shows both fetching and displaying an image from local storage as well as one from network.


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.

Bulletin of the Atomic Scientists, For example, one basic React Native component is the Image . from 'react'; import { Text, View } from 'react-native'; const Greeting = (props) => { return ( <​View  Use <Image> with a local file. The documentation says that the only way to reference a static image is to use require. But I'm not sure where does react expect to have those images. The examples don't have any domain, so it seems like you have to go to Xcode and add them to Images.xcassets, but that didn't work for me.


Props · React Native, As any student of history knows, domestic and international conflicts can stem from various to give readers a stimulating sample of the work being done in this field and to Manuscripts must be submitted in duplicate; enclose return postage​. A React component for displaying different types of images, including network images, static resources, temporary local images, and images from local disk, such as the camera roll. This example shows fetching and displaying an image from local storage as well as one from network and even from data provided in the 'data:' uri scheme.


Popular Science, WHETHER A SHOE'S CUSHIONING IS TOO SOFT OR TOO FIRM, ration" TO COMPARING LIVE VIDEO IMAGES OF A TARGET WITH RECON PHOTOS IN r  Show image local with dynamic url. According to the doc of react native the internal and external way to show images are: render() {return


Generating Images in JavaScript Without Using the Canvas API, But in a perfect example of why being a newsroom developer is so interesting, us draw images locally and read them out as PNG data URLs by using Canvas. Luckily, these days browsers have typed arrays — fixed length, integer arrays the lab has wrapped up all of our byte-editing code into an JS library, which is  Screen Density. React Native offers a way to optimize images for different devices using @2x, @3x suffix. The app will load only the image necessary for particular screen density. The following will be the names of the image inside the img folder.