Use with a local file

Question

The documentation says that the only way to reference a static image is to use require.

But I\'m not sure where does react expect to have those images. The examples don

Answer 1

If loading images dynamically one can create a .js file like following and do require in it.

export const data = [
  {
    id: "1",
    text: "blablabla1",
    imageLink: require('../assets/first-image.png')
  },
  {
    id: "2",
    text: "blablabla2",
    imageLink: require('../assets/second-image.png')
  }
]

In your component .js file

import {data} from './js-u-created-above';
...

function UsageExample({item}) {
   
      
   
}

function ComponentName() {
   const elements = data.map(item =>  );
   return (...);
}