Rendering local images from database

Question

I'm making a country picker with flags. The country names and flag image name is coming from database, like this (sample):

dataSource: [
{
  id: 1,
  name: "Afghanistan",
  image: '../assets/flags/af.png'
},
{
  id: 2,
  name: "Bahrain",
  image: '../assets/flags/ba.png'
},
{
  id: 3,
  name: "Canada",
  image: '../assets/flags/ca.png'
}]

Then I send that dataSource to my component

                        <CountryPickerFlags
                          dataSource={this.state.dataSource}
                        />

Then in the component FlatList (renderItem) I do:

  _renderItemListValues(item, index) {
      var image_uri = {uri: item.image} ;   
      
      console.log(JSON.stringify(image_uri));
        
    return (
    
      <TouchableOpacity
        activeOpacity={1}
        style={styles.listRowClickTouchStyle}
        onPress={() => this._setSelectedIndex(item.id, item.name)}
      >
        <View style={[styles.listRowContainerStyle,{ flexDirection:'row', justifyContent: 'center', alignItems: 'center'}]} >
          <Image source={image_uri} />
          <Text style={styles.listTextViewStyle}>{item.name}</Text>
        </View>
      </TouchableOpacity>
    );
  }

But the flag is not rendered.... If I hardcode the image (with require) it's working...

  <Image source={require("../assets/flags/af.png")} />

How can I do it?

Leri Gogsadze · Accepted Answer · 2020-12-18T12:41:44.353

1

Go to assets folder and create a file prepareImages.js and paste inside the following:

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

This will create an index.js file where will be an object like that:

"../assets/flags/af.png": require("./af.png"),

Import images from this file where you render Image component.

import images from "../assets/flags/images";

Render image source like that:

<Image source={images[image_uri]} />

edited Dec 18 '20 at 12:41

answered Dec 18 '20 at 11:52

Leri Gogsadze

2,958
2
15
24

How do I "execute" the prepareImages.js ? – Marco Martin Dec 18 '20 at 15:04
Go to assets folder and run **node prepareImages.js** – Leri Gogsadze Dec 18 '20 at 15:06
Thanks! Worked! But with this system you propose me, how do I merge the data from database, with this images import to send it to the component... The component will be shared so I cannot import there the images... – Marco Martin Dec 18 '20 at 15:18
I don’t understand what you want to do – Leri Gogsadze Dec 18 '20 at 15:24
I did it....dataSource: [ { id: 1, name: "Afghanistan", image: images['../assets/flags/af.png'] }, – Marco Martin Dec 18 '20 at 15:25
Good. You can remove prepareImages.js – Leri Gogsadze Dec 18 '20 at 15:27

score 0 · Answer 2 · answered Dec 18 '20 at 10:19

0

Add require to your data set like

dataSource: [ { ..., image: require('../assets/flags/af.png')}]

answered Dec 18 '20 at 10:19

Nooruddin Lakhani

7,507
2
19
39

1

yes, but teorically the dataSource comes from DB, should I put "require" also in the database? – Marco Martin Dec 18 '20 at 11:16
Yes, If you put require in the prefix, It would help here to show the image on render – Nooruddin Lakhani Dec 18 '20 at 11:24

Rendering local images from database

2 Answers2

Linked