CODEWITHSUNDEEP
androidiosreactjsreact-native
Lucas Farleigh
Lucas Farleigh

Reputation: 1188

Can't find relative/local directory for image - React Native

I am trying to display an image from my computer files. However, it won't appear. I did a small bit of debugging and found that when I set my directory to this:

    source={{uri:'http://www.telegraph.co.uk/content/dam/Travel/galleries/travel/activityandadventure/The-worlds-most-beautiful-mountains/mountains-fitzroy_3374108a.jpg'}}

It shows the image in the centre of the screen as I want it to be. I do not want to use a network address, I want to use a relative one. So I use this:

source={{uri:'/./pictures/m.jpg'}}

When I do this, it appears with no image or an error. How do I get the image to appear in the relative directory? Here is all my code:

    import React, { Component } from 'react';
import { Button,Alert, TouchableOpacity,Image, Dimensions } from 'react-native'

import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} from 'react-native';

class Project extends Component {
  render() {
    return (
      <View style={{backgroundColor: '#375D81', flex: 1}}>

        <View style = {styles.container}>
             <Image source={{uri: './pictures/Blur.png/'}} style={{ resizeMode: 'cover', width: 100, height: 100 }}/>
          <TouchableOpacity style = {styles.buttonText1} onPress={() => { Alert.alert('You tapped the button!')}}>
             <Text style={styles.text}> 
              Button 1
             </Text>
           </TouchableOpacity>

           <TouchableOpacity style = {styles.buttonText2} onPress={() => { Alert.alert('You tapped the button!')}}>
             <Text style= {styles.text}>
              Button 2
             </Text>
           </TouchableOpacity>

        </View>
      </View>
    );
  }
}

Here are my folders: enter image description here Thank you in advance.

Upvotes: 0

Views: 1442

Answers (1)

Lucas Farleigh
Lucas Farleigh

Reputation: 1188

When using a local directory, it is better to use the require function such as:

 <Image source={{require('./pictures/Blur.png/')}} style={{ resizeMode: 'cover', width: 100, height: 100 }}/>

Upvotes: 1

Related Questions