React 不会加载从对象数组导入的图像

Question

我这样做的目的是尝试将球队徽标与他们的赔率相关联，因为如果我想要 api 的徽标，则需要花钱。

正如我们从下面的代码中看到的那样，我导入了我所有的图像，并将其导出为一个对象数组，每个对象都有其特定的徽标

import western_united from "./western-united.png";
import brisbane from "./brisbane.png";
import western_sydney from "./western-sydney.gif";
import newcastle_jets from "./newcastle-jets.gif";
import central_coast from "./central-coast.gif";
import melbourne_city from "./melbourne-city.png";
import wellington from "./wellington.gif";
import perth from "./perth.gif";
import adelaide from "./adelaide.gif";
import mcarthur from "./mcarthur.png";
import melbourne_victory from "./melbourne-victory.gif";
import sydney from "./perth.gif";

const images = [
    {
        name: "Western United FC",
        image: western_united,
    },
    {
        name: "Brisbane Roar",
        image: brisbane,
    },
    {
        name: "Western Sydney Wanderers",
        image: western_sydney,
    },
    {
        name: "Newcastle Jets FC",
        image: newcastle_jets,
    },
    {
        name: "Central Coast Mariners",
        image: central_coast,
    },
    {
        name: "Melbourne City",
        image: melbourne_city,
    },
    {
        name: "Wellington Pheonix FC",
        image: wellington,
    },
    {
        name: "Perth Glory",
        image: perth,
    },
    {
        name: "Adelaide United",
        image: adelaide,
    },
    {
        name: "Macarthur FC",
        image: mcarthur,
    },
    {
        name: "Melbourne Victory FC",
        image: melbourne_victory,
    },
    {
        name: "Sydney FC",
        image: sydney,
    },
];

export default images;

现在这是我的逻辑，将图像导入组件，找出每个图像与哪个团队相关联，并将其提供给 img html 标签的“src”

import React, { useEffect } from "react";
import images from "../images/index";

function Games({ games }) {
    let foundHome;
    let foundAway;

    function returnImage() {
        foundHome = images.find((element) => element.name === games.home_team);
        foundHome = foundHome.image;
        console.log(foundHome);

        foundAway = images.find((element) => element.name === games.away_team);
        foundAway = foundAway.image;
        console.log(foundAway);
    }

    useEffect(() => {
        returnImage();
    }, []);

    return (
        <div className="games__container">
            <div className="betting__container">
                <div className="team_a">
                    <figure className="image__container">
                        <img src={foundHome} alt="" className="image" />
                    </figure>
                    <p className="team--name">{games.home_team}</p>
                    <button className="btn">{games.bookmakers[0].markets[0].outcomes[0].price}</button>
                </div>
                <div className="draw__container">
                    <p className="draw">Draw</p>
                    <button className="btn">{games.bookmakers[0].markets[0].outcomes[2].price}</button>
                </div>
                <div className="team_b">
                    <figure className="image__container">
                        <img src={foundAway} alt="" className="image" />
                    </figure>
                    <p className="team--name">{games.away_team}</p>
                    <button className="btn">{games.bookmakers[0].markets[0].outcomes[1].price}</button>
                </div>
            </div>
        </div>
    );
}

export default Games;

当我在控制台记录输出时，它 returns 每个图像“/static/media/adelaide.5775692ae1b78491dcca.gif”的类似字符串。但是它不渲染任何图像并且留空，我在这里做错了什么？

Answer 1

问题是传递给 useEffect 的回调在 React 完成渲染后运行。因此，当呈现 img 时，foundHome 和 foundAway 变量都是 undefined，因此 src 属性设置为 undefined。

这里实际上不需要效果挂钩，因为没有副作用，您可以在渲染期间直接计算 foundHome 和 foundAway。

import React, { useEffect } from "react";
import images from "../images/index";

function Games({ games }) {
  let foundHome = images.find(
    (element) => element.name === games.home_team
  ).image;

  let foundAway = images.find(
    (element) => element.name === games.away_team
  ).image;

  return (
    <div className="games__container">
      <div className="betting__container">
        <div className="team_a">
          <figure className="image__container">
            <img src={foundHome} alt="" className="image" />
          </figure>
          <p className="team--name">{games.home_team}</p>
          <button className="btn">
            {games.bookmakers[0].markets[0].outcomes[0].price}
          </button>
        </div>
        <div className="draw__container">
          <p className="draw">Draw</p>
          <button className="btn">
            {games.bookmakers[0].markets[0].outcomes[2].price}
          </button>
        </div>
        <div className="team_b">
          <figure className="image__container">
            <img src={foundAway} alt="" className="image" />
          </figure>
          <p className="team--name">{games.away_team}</p>
          <button className="btn">
            {games.bookmakers[0].markets[0].outcomes[1].price}
          </button>
        </div>
      </div>
    </div>
  );
}

export default Games;

React 不会加载从对象数组导入的图像

React wont load images that are imported from an array of objects

html

javascript

css

web

reactjs