如何在 React 中显示来自 JSON URL 数组的图像答案

【问题标题】：How to display images from a JSON URL array in React如何在 React 中显示来自 JSON URL 数组的图像
【发布时间】：2022-01-21 16:09:17
【问题描述】：

我已将 JSON 端点转换为 JavaScript 数组，并通过它进行映射以获取所需的键值。 4 个中有 3 个是文本值，但第一个是图像，它只显示 URL 链接。我试图通过同一个数组进行映射并仅显示图像并且它可以工作，但是我无法将这两个元素合并到一个 div 中。

代码：

export default function Pokes() {

  const [pokemonData, setPokemonData] = React.useState({});

  React.useEffect(() => {
    fetch(
      "https://raw.githubusercontent.com/Biuni/PokemonGO-Pokedex/master/pokedex.json"
    )
      .then((res) => res.json())
      .then((data) => setPokemonData(data.pokemon));
  }, []);

  const allPokes = pokemonData;
  const pokemons = Object.values(allPokes);
  
  const pokesData = pokemons.map(pokemon => `${pokemon.img} ${pokemon.num} ${pokemon.name} ${pokemon.type}`);

let renderedOutput = pokesData.map(item => <div className="infodiv" style={{ flex: 1, flexBasis: "33%" }}> {item} </div>)


 return (
        <main>
          <div>
         
            <div style={{ display: "flex", flexWrap: "wrap" }}>{renderedOutput}</div>
           
          </div>
        </main>
      );

}

【问题讨论】：

你需要 <img> 元素并使用 url 设置 src

标签： javascript arrays reactjs json react-hooks

【解决方案1】：

如果这是您所关心的，这就是解决方案。以下代码是codesandbox；

import { useState, useEffect, useCallback } from "react";
import axios from "axios";

const URI =
  "https://raw.githubusercontent.com/Biuni/PokemonGO-Pokedex/master/pokedex.json";

const App = () => {
  const [values, setValues] = useState([]);

  const getPokomonGo = useCallback(async () => {
    try {
      const { data } = await axios.get(URI);
      if (data) setValues(data?.pokemon);
    } catch (err) {
      console.log({ err });
    }
  }, []);

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

  return (
    <div className="App">
      <h1>Pokemon Images</h1>
      {values &&
        values.map(({ num, name, img }) => (
          <img src={img} alt={name} key={num} />
        ))}
    </div>
  );
};

export default App;

【讨论】：

上述解决方案有效，但我也会尝试这个。谢谢。
@KamilTkacz 我很高兴它帮助了你。您能否也为解决方案投票。
就像我想坐在那里一样，但我还没有声望 15 或者有其他方法可以做到吗？最佳

【解决方案2】：

&lt;img src={{item.img}} alt="Lamp" width="100" height="100"&gt;

【讨论】：

【解决方案3】：

const pokesData = pokemons.map(pokemon => `${pokemon.img} ${pokemon.num} ${pokemon.name} ${pokemon.type}`)

这行代码会返回“图片url编号名称”，你真正想要的是需要使用img HTML标签的真实图片。用你的代码实现它，它会变成：

export default function Pokes() {

  const [pokemonData, setPokemonData] = React.useState({});

  React.useEffect(() => {
    fetch(
      "https://raw.githubusercontent.com/Biuni/PokemonGO-Pokedex/master/pokedex.json"
    )
      .then((res) => res.json())
      .then((data) => setPokemonData(data.pokemon));
  }, []);

  const allPokes = pokemonData;
  const pokemons = Object.values(allPokes);

  let renderedOutput = pokemons.map(pokemon => <div className="infodiv" style={{ flex: 1, flexBasis: "33%" }}>  <img src={pokemon.img} /> {pokemon.num} {pokemon.name}  </div>)
// Note the code change above ^^^

 return (
        <main>
          <div>
         
            <div style={{ display: "flex", flexWrap: "wrap" }}>{renderedOutput}</div>
           
          </div>
        </main>
      );

}

【讨论】：