images not loading, when call from another JS file in react

Question

looking for help, whenever I trying to call images from WSdata.js to index.js on browser images is not loading though I can see other data.

Images are loading on browser when images are imported in index.js file

Index.js File Code

import React from "react";
import ReactDom from "react-dom";
import Card from "./Card";
import WSdata from "./WSdata";


ReactDom.render(
    <Card
      image={WSdata[0].img}
      platForm={WSdata[0].platform}
      webSeriesTitle={WSdata[0].name}
      webSeriesType={WSdata[0].type}
      webSeriesLink={WSdata[0].link}
    />,
  document.getElementById("root")
);

WSdata.js File Code

import SacredGames from "./asset/images/sacredgames.png";

const WSdata = [
{
img:{SacredGames},
Platform: "Netflix Original Series",
name: "Sacred Games",
type: "Action, Thriller",
link: "https://www.youtube.com/watch?v=-GSD42Rik68",
},
export default WSdata;

Card.js File Code

import React from "react";
function Card(props) {
return (
<>
  <div className="card">
    <div className="web-series-poster">
      <img src={props.image} />
    </div>
    <div className="web-series-info">
      <p className="web-series-platform">{props.platForm}</p>
      <p className="web-series-title">{props.webSeriesTitle}</p>
      <p className="web-series-type">{props.webSeriesType}</p>
      <a href={props.webSeriesLink} target="_blank">
        <button>Watch Now</button>
      </a>
    </div>
  </div>
</>
);
}

export default Card;

You're exporting the value of the img property as an object. Should it be img: SacredGames, instead of img:{SacredGames},? — dikuw
– dikuw, Commented Sep 8, 2020 at 7:51

wadecodes · Accepted Answer · 2020-09-08 06:30:02Z

2

You're converting Sacred Games into an object. Remove the curly braces.

   const WSdata = [
    {
      img:  SacredGames ,
      Platform: 'Netflix Original Series',
      name: 'Sacred Games',
      type: 'Action, Thriller',
      link: 'https://www.youtube.com/watch?v=-GSD42Rik68',
    },
  ];

answered Sep 8, 2020 at 6:30

wadecodes

1877 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

images not loading, when call from another JS file in react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related