reading image from src/assets folder at runtime using props in React

Question

I want to display image randomly in React. Images are placed inside src/assets folder.

I have to display them using props.

Row.js:

import React from 'react'
import {View, Text } from 'react-native';
const Row = (props) => (
   
    <View style={{flex:1, flexDirection: 'row'}}>
       <img src={require(props.value)}> //Error: Cannot find module '../assets/icondelivery.PNG'
      
       </img>
       <Text>{props.value}</Text>
  </View>
)

export default Row

props.value contains : ../assets/icondelivery.PNG

Hierarchy is : src/assets/icondelivery.PNG

Note: If I pass <img src={require('../assets/icondelivery.PNG')}> , it works.

Anish Mittal · Accepted Answer · 2023-02-04 16:35:26Z

1

Put assets folder in public folder. Change path from ../assets/icondelivery.PNG to ./assets/icondelivery.PNG Use this code:

import React from 'react'
import {View, Text } from 'react-native';
const Row = (props) => (
  <View style={{flex:1, flexDirection: 'row'}}>
    <img src={process.env.PUBLIC_URL + props.value}/>
    <Text>{props.value }</Text> 
  </View>
)

export default Row

answered Feb 4, 2023 at 16:35

Anish Mittal

1,18215 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

MrCode · Accepted Answer · 2023-02-04 16:33:36Z

0

For dynamic image sources that are known then you can use require() in your definitions instead of within the img src itself.

For example

<Row value={require('../assets/icondelivery.PNG')} />

Then in the component:

<img src={props.value}>

If you have a structure containing the images like an array you could put require() there:

const images = [
    { name: 'delivery', src: requiure('../assets/icondelivery.PNG')}
    ...
    ...
]

edited Feb 4, 2023 at 16:33

answered Feb 4, 2023 at 16:04

MrCode

64.6k10 gold badges95 silver badges114 bronze badges

Collectives™ on Stack Overflow

reading image from src/assets folder at runtime using props in React

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related