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

Posted 2023-02-14

【中文标题】如何在 React 中显示来自 JSON URL 数组的图像

【英文标题】：How to display images from a JSON URL array in React

【发布时间】：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

【参考方案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】：

<img src=item.img alt="Lamp" width="100" height="100">

【参考方案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>
      );