CODEWITHSUNDEEP
reactjsreact-native
colla
colla

Reputation: 837

React Native can't find image

I have a file where I store some information in json format :

export const dummyData = [
    {
        title: 'BOAT DETAILS', url :'/home/chloe/Desktop/App/app/component/schema.jpg', 
        description: 'xxxxxxx', id : 1
    }, 
    {
        title: 'TUTORIALS', url :'/home/chloe/Desktop/App/app/component/tuto.png', 
        description: 'yyyyyyyyy', id : 2
    }, 
]

This information is called in a component named CarouselItem.js :

const CarouselItem = ({item}) => {
    const url = item.url
    return (
        <View style= {styles.cardView}>
            <Image style = {styles.image} source={require(url)} />
            <View style = {styles.textView}>
                <Text style = {styles.itemTitle}>{item.title}</Text>
    <Text style={ styles.imageDescription}>{item.description}</Text>
            </View>
        </View>
    )
}

My problem is that when I try to pass the url (so the item.url) it says the following error:

enter image description here

The pictures do exist in my app because if I do : source={require('/home/chloe/Desktop/App/app/component/schema.jpg')} then it works and if I do url = '/home/chloe/Desktop/App/app/component/schema.jpg' it still does not work.

So what amI doing wrong here?

Upvotes: 0

Views: 130

Answers (2)

gabriel_tiso
gabriel_tiso

Reputation: 1137

You can try to use the uri method

<Image style = {styles.image} source={{ uri: url }} />

Edit:

I foud this post, and based on your error, I think it will be useful Post

Upvotes: 0

Monique Altero
Monique Altero

Reputation: 76

If you're trying to load a local image you may use something like this:

<Image source={require('./path/to/image.png')} />

But if you're reading an external URL, try this:

<Image source={{ uri: external_url }} />

PS: when using external URL you must declare image's width and height. And for local images consider creating an assets folder inside your project.

Upvotes: 1

Related Questions