Estoy agregando un botón a un sitio web que selecciona aleatoriamente los equipos de la NBA y proporciona una imagen con la respuesta. Tengo el aleatorizador configurado para proporcionar el equipo aleatorio cuando se presiona el botón, pero no estoy seguro de cómo obtener una imagen que coincida con el equipo seleccionado.

Mi aleatorizador en JS:

 let teams = { atlanta: "Atlanta Hawks", boston: "Boston Celtics", brooklyn: "Brooklyn Nets", charlotte: "Charlotte Hornets", chicago: "Chicago Bulls", cleveland: "Cleveland Cavaliers", dallas: "Dallas Mavericks", denver: "Denver Nuggets", detroit: "Detroit Pistons", goldenState: "Golden State Warriors", houston: "Houston Rockets", indiana: "Indiana Pacers", clippers: "Los Angeles Clippers", lakers: "Los Angeles Lakers", memphis: "Memphis Grizzlies", miami: "Miami Heat", milwaukee: "Milwaukee Bucks", minnesota: "Minnesota Timberwolves", pelicans: "New Orleans Pelicans", knicks: "New York Knicks", thunder: "Oklahoma City Thunder", orlando: "Orlando Magic", philadelphia: "Philadelphia 76ers", phoenix: "Phoenix Suns", portland: "Portland Trail Blazers", sacramento: "Sacramento Kings", spurs: "San Antonio Spurs", toronto: "Toronto Raptors", utah: "Utah Jazz", washington: "Washington Wizards" } const values = Object.values(teams) app.get("/api/teams", (req, res)=>{ const randomTeam = values[Math.floor(Math.random()*values.length)] console.log(randomTeam) res.status(200).send(randomTeam) })

Para agregar el nombre del equipo a HTML:

 <script> document.getElementById("button").onclick = function () { axios.get("http://localhost:5151/api/teams").then(function(response) { const data = response.data; document.getElementById("randomTeamCard").innerHTML = [data].map(function(team) { return `The team you should bandwagon is: ${data}!`; }) .join(""); }).catch(function (err) { document.getElementById("randomTeamCard").innerHTML = '<li class="text-danger">' + err.message + "</li>"; }); }; </script>