Display image from a folder with React Native

Question

I ran into a silly issue I don't know how to solve.

I have a screen with a camera that takes a photo and returns a path to the previous screen. In this screen, I want to display the photo that was taken. I have a path to the photo.

So the standard way to display an image is <Image style={styles.img} source={require('../path/img.png')} />

This is what I try to do:

</View> {this.state.photoFile ? ( <Image style={styles.img} source={require(this.state.photoFile)} /> ) : null} </View>

I get an error Invalid call at line #

I tried to get around it with

this.state = { photoFile: '../../resources/logo.png' } ... <Image style={styles.img} source={require(this.state.photoFile)} />

let img = require('../../resources/logo.png') if (this.state.photoFile) { img = require(this.state.photoFile) }

and even

let path = '../../resources/logo.png' if (this.state.photoFile) path = this.state.photoFile let img = require(path)

But none worked.

How do I get around this? Thanks.

Aurangzaib Rana · Accepted Answer · 2019-11-25 14:10:23Z

In React native ,all your images sources needs to be loaded before compiling your bundle.So you can not render Image from dynamic path in require.

you can use base64 to show image. Camera also provide base64 image.

if you want to create dynamic path for pre-builded Images that will be done by switch statement

for example

class App extends Component { state = { avatar: "" } get avatarImage() { switch (this.state.avatar) { case "car": return require('./car.png'); case "bike": return require('./bike.png'); case "bus": return require('./bus.png'); default: return require('./defualt.png'); } } render() { return <Image source={this.avatarImage} /> } }

Collectives™ on Stack Overflow

Display image from a folder with React Native

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related