React не будет загружать изображения, импортированные из массива объектов. ⇐ Html

[Anonymous]

Цель того, что я делаю, — попытаться связать логотип команд с их шансами, потому что, если бы мне нужен был логотип из 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;

Теперь это моя логика, которая импортирует изображения в компонент, определяет, какая команда связана с каждым изображением, и передает ее в «src» для тега img html.

Код: Выделить всё

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 (




[img]{foundHome} alt=[/img]

{games.home_team}
{games.bookmakers[0].markets[0].outcomes[0].price}

Draw
{games.bookmakers[0].markets[0].outcomes[2].price}


[img]{foundAway} alt=[/img]

{games.away_team}
{games.bookmakers[0].markets[0].outcomes[1].price}



);
}

export default Games;

Когда я записываю вывод на консоль, он возвращает примерно такую ​​строку для каждого изображения "/static/media/adelaide.5775692ae1b78491dcca.gif". Но он не отображает никаких изображений и остается пустым. Что я здесь делаю не так?

Подробнее здесь: https://stackoverflow.com/questions/720 ... of-objects