Question: This is the entire folder React structure:

[![enter image description here](https://i.stack.imgur.com/OMnMj.png)](https://i.stack.imgur.com/OMnMj.png)

I have a data.js file with some data so I can map it dynamically in one of my components.

[![enter image description here](https://i.stack.imgur.com/sIvu9.png)](https://i.stack.imgur.com/sIvu9.png)

Upon doing the following code in my component Cities.js:

```
import React from 'react';
import {countries} from "../database/data"

 function countriesExplain () {
    return (
        <>
        <div className="">
          {countries.map((data, key) => {
            return (
              <div key={key}>
                  <div>
                 { data.countryCapital }
                 </div>
                 <div>
                 { data.cities['id-1'].name }
                 </div>
                 <div>
                 { data.cities['id-1'].src }
                 </div>
              </div>
            );
          })}
        </div>
      </>
    );
}

export default countriesExplain;

```

When mapping through the data to show the image I am getting this error on the FrontEnd

[![enter image description here](https://i.stack.imgur.com/lkPvw.png)](https://i.stack.imgur.com/lkPvw.png)

What am I doing wrong? The image path seems to be correct in my view so I am not sure why am I not getting the image on my frontend.

Thanks

Answer: 
You should place your **images** folder into the **public** folder. Also, change the line:

```
"src": require("../images/merbourne-city.jpg")

```

to

```
"src": "/images/merbourne-city.jpg".

```

Note: The code in countriesExplain.js will display the path of the image. If you want to display the image, you should replace the **div** with **img** tag.

data.js

```
  "cities": {
      "id-1": {
        "name": "Melbpurne",
        "src": "/images/merbourne-city.jpg"
      }
    }

```

countriesExplain.js

```
import React from 'react';
import {countries} from "../database/data"

 function countriesExplain () {
    return (
        <>
        <div className="">
          {countries.map((data, key) => {
            return (
              <div key={key}>
                  <div>
                 { data.countryCapital }
                 </div>
                 <div>
                 { data.cities['id-1'].name }
                 </div>
                 <img src={ data.cities['id-1'].src }/>
              </div>
            );
          })}
        </div>
      </>
    );
}

export default countriesExplain;

```
try this:

```
 function countriesExplain () {
        return (
            <>
            <div className="">
              {countries.map((data, key) => {
                return (
                  <div key={key}>
                      <div>
                     { data.countryCapital }
                     </div>
                     <div>
                     { data.cities.id-1.name }
                     </div>
                     <div>
                     { data.cities.id-1.src }
                     </div>
                  </div>
                );
              })}
            </div>
          </>
        );
    }

```

And make sure the path you take from the database is the same as the path you have
Given the structure of your folder, I think this is the path of your photo in the app `../../images/melbourne-city.jpg`