CODEWITHSUNDEEP
reactjs
Rajan Tiwari
Rajan Tiwari

Reputation: 39

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

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;

Upvotes: 2

Views: 45

Answers (1)

wadecodes
wadecodes

Reputation: 187

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',
    },
  ];

Upvotes: 2

Related Questions