reactjs - 图像未加载，当在 react 中从另一个 JS 文件调用时

Question

寻求帮助，每当我尝试在浏览器图像上将图像从 WSdata.js 调用到 index.js 时，虽然我可以看到其他数据，但未加载。
在 index.js 文件中导入图像时，图像正在浏览器上加载
Index.js 文件代码

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 文件代码

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 文件代码

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;   

Answer 1

您正在转换 Sacred Games变成一个对象。删除花括号。

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