There is a list of hunderds of PNG images with names consisting only of 2 letters, example aa.png, ab.png, ac.png, etc.

There is an endpoint which returns an array of object having a property name which has 3 letters, first 2 being the same letters as from the PNG images, example:

[{ name: 'aax', ... }, { name: 'aby', ... }, { name: 'acq', ... }, ... ]

I will map through this array, for each element it will be a component that will show some info for that specific object and it should also show the images with the same first 2 chars.

Here is my implementation:

import React from 'react';

import ListItem from '@material-ui/core/ListItem';
const MyComponent = (data) => {
  const flag = `../flags/${data.name.substring(0, 2).toLowerCase()}.png`;
  return (
    <ListItem>
      <div>
        <div>Info: {data.info}</div>
        <img src={flag} alt='this is a flag' />
      </div>
    </ListItem>
  );
};

export default MyComponent;

It doesn't take any image, don't know why. All those images are situated in that flags folder.

Any ideas how to solve this?