Import image string from JSON Data in Image component in React Native

Question

I'm trying to get the image string from the mock data array and push it inside <Image> Component in React Native. Here's my Data array:

const data= [
  {
    title: 'Lorem ipsum dolor sit amet.',
    price: '$1.99',
    image: '../assets/img/item01.jpg',
  },
  {
    title: 'Lorem ipsum dolor sit amet.',
    price: '$1.99',
    image: '../assets/img/item02.jpg',
  },
  {
    title: 'Lorem ipsum dolor sit amet.',
    price: '$1.99',
    image: '../assets/img/item03.jpg',
  },
  {
    title: 'Lorem ipsum dolor sit amet.',
    price: '$1.99',
    image: '../assets/img/item04.jpg',
  },
  {
    title: 'Lorem ipsum dolor sit amet.',
    price: '$1.99',
    image: '../assets/img/item05.jpg',
  },
  {
    title: 'Lorem ipsum dolor sit amet.',
    price: '$1.99',
    image: '../assets/img/item06.jpg',
  },
  {
    title: 'Lorem ipsum dolor sit amet.',
    price: '$1.99',
    image: '../assets/img/item07.jpg',
  },
];

I'm trying to use the image value via mapping the data array. The Image Component is:

<View style={{
      width: 164,
      height: 164,
      borderRadius: (1 / 2) * 164,
      backgroundColor: color.white,
      shadowColor: 'rgba(57,57,57,0.5)',
      shadowOffset: { width: 0, height: 1 },
      shadowRadius: 2,
      elevation: 20,
      overflow: 'hidden',
}}>
 <Image
  source={require(data.image)}
  resizeMode='contain'
  style={{ width: null, height: null, flex: 1 }}
 />
</View>

if I use this, then there's an error occurred: Invalid call at line 60: require(item.illustration)

If I use- source={{ uri: item.illustration }} instead of require function, then Nothing appears. Can anyone help me out with how Can I import Local Image from an array?

It is another problem of react. You can't use require in image compoment when map data. Remove require from image component, add to data array. — Nijat Aliyev, Apr 07 '22 at 03:55
More information - https://stackoverflow.com/questions/51937819/image-not-showing-when-mapping-an-array-and-render-an-image — Nijat Aliyev, Apr 07 '22 at 03:56

Sumit_VE · Accepted Answer · 2022-04-07T08:27:33.743

If you are using local images then you need to add require function to load the images when you are going to display by url then you need to add uri

You can add local images with require function in your Data Array like this

const data= [
 {
 title: 'Lorem ipsum dolor sit amet.',
 price: '$1.99',
 image: require(../assets/img/item01.jpg),
 },
 {
 title: 'Lorem ipsum dolor sit amet.',
 price: '$1.99',
 image: require(../assets/img/item01.jpg),
 },
]

and in your image view just need to call it like this

<Image
 source={data.image}
 resizeMode='contain'
 style={{ width: null, height: null, flex: 1 }}
/>

and if you are not able to achieve so you can also export the images like this and add in your Data array

export const first_img = require('../assets/img/item01.jpg');
export const second_img = require('../assets/img/item01.jpg');


const data= [
 {
 title: 'Lorem ipsum dolor sit amet.',
 price: '$1.99',
 image: first_img,
 }
]

and you can call it in a same way

Okay, think of the future; I'm fetching data via API, then what? How will I use the `image` key of an object in the Image Component? — Maruf, Apr 07 '22 at 23:19
Is there any way/method using which I can convert the file path into URI and use it in `source={{uri: //converted uri here }}` — Maruf, Apr 07 '22 at 23:38

score 0 · Answer 2 · answered Apr 13 '22 at 06:41

A bit late but hopefully it can help someone. You can use resolveAssetSource from Image

const data= [
       { title: 'Lorem ipsum dolor sit amet.',
         price: '$1.99',
         image: Image.resolveAssetSource(require("../assets/img/item01.jpg")).uri, 
       }
      ]

Of course you would need to import Image first,

import { Image } from "react-native";

Import image string from JSON Data in Image component in React Native

2 Answers2