This is the entire folder React structure:
I have a data.js file with some data so I can map it dynamically in one of my components.
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
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
question from:https://stackoverflow.com/questions/65858373/unable-to-import-image-from-data-js-file-in-react