Unable to import image from data.js file in React

Question

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

Please post data.js as editable. It is also recommended to post the code in editable form. — Zain Ul Abideen
– Zain Ul Abideen, Commented Jan 23, 2021 at 11:21

jzProg · Accepted Answer · 2021-01-23 11:51:29Z

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;

zahra zamani · Accepted Answer · 2021-01-23 11:22:44Z

0

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

edited Jan 23, 2021 at 11:22

answered Jan 23, 2021 at 11:11

zahra zamani

1,38312 silver badges31 bronze badges

1 Comment

Zain Ul Abideen Over a year ago

How can this resolve that issue? When issue is not even in this file.

Collectives™ on Stack Overflow

Unable to import image from data.js file in React

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related