React Native: Image Not Displaying With Dynamic/Local Uri

React Native: Image not displaying with dynamic/local URI

Turns out the solution was pretty stupid, but all I had to do was set a width and height to the tag, like:

<Image style={{width:100,height:100}} source={this.state.pickedImage == null? require('./Placeholder.jpeg'):{uri: this.state.pickedImage}}/>

I had initially overlooked this solution because I had done something like:

<Image style={{width:'100%',height:'100%'}} source={this.state.pickedImage == null? require('./Placeholder.jpeg'):{uri: this.state.pickedImage}}/>

and it didn't work at the time but now it works. I have no clue why, but it just works now. If anyone has any idea why, I would be very grateful to know why.

React Native:How to dynamically arrange local images in display when picked from local gallery?

You don't have to require user input images.

You should use them as external images because react-native-image-picker will return url of picked image.

So instead of

 <Image source={require(img_source)} />

you should:

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

React Native : Image source URI containing URL path of local image brought from API?

At Core, React Native support 2 types of images:

1. Local Images: Image needs to be embedded with app at runtime using node's require([asset_path]) and not work for a dynamic path.

2. Networks Images. Those are images hosted to remote server and you reference them by Universal Resource Identifier (URI) and most time is valid HTTP or HTTPS resource link.

You're trying to pass URI as a remote image which is an invalid (.../assets/images/subfolder/filename.ext) URI.

There are 2 ways you can solve this problem and both work well for Mobile and Web.

1. Convert images to base64 and save encoded image string in
   database (Brute-force solution)

2. Upload images to cloud providers like Amazon AWS or Firebase Storage and save respective public links in the database.

React Native Dynamic Images

Depending on the number of images that you are expecting you could try placing an images.js file in your assets/images folder and require them as such:

// assets/images/images.js
const images = {
 rohit: require("./rohit.png"),
 bhavya: require("./bhayva.png")
}
export default images;

Then in your MainComponent, if you were to trim off the assets:/ part of the string in the uri then you could use:

import images from "../assets/images"

{initialArr.map((prop, key) => {
  return (
    <View style={styles.container}>
      <Image source={images[prop.uri]} style={styles.image}></Image>
      <Text key={key}>{prop.uri}</Text>
    </View>
  );
})}

If you are dealing with a large number of images, then your images.js file will become difficult to maintain, in that case you could try using a plugin like https://github.com/dushaobindoudou/babel-plugin-require-all and then write a small script which will create an dictionary of your images like:

// prepareImages.js
const fs = require("fs");
const files = fs.readdirSync("./assets/images").filter(x => x.includes("png"));
const ex = "{\n" +
files.map(x => `"${x.split(".png")[0]}": require("./${x}"),`).join("\n") + "}";
const res = "export default " + ex;
fs.writeFileSync("./assets/images/index.js", res);

---

Related Topics