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?

Answer 1

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

Answer 2

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";