如何在 React JS 中顯示口袋妖怪圖像？

Question

我是 React JS 技術的新手，我從工作中得到了一個任務來顯示神奇寶貝的名稱和圖像，我顯示了名稱但是我無法顯示神奇寶貝的圖像，任何人都可以幫我顯示神奇寶貝的圖像。 如果您對我的問題有任何疑問，請隨時問我。

import React, { useEffect, useState } from "react";
import Axios from "axios";

const Pokemonapi = () => {
  const [text, setText] = useState("");
  const [data, setData] = useState([]);

  const Search = () => {
    if (text == "") {
      alert("Please Enter a name to be search");
    } else {
      searchPokemon();
      setText("");
    }
  };

  const searchPokemon = async () => {
    const response = await Axios.get(
      `https://pokeapi.co/api/v2/pokemon/${text}`
    );
    //   const getdata = await response.json();
    setData(response.data.results);
    console.log(response);
  };

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

  return (
    <div>
      <div className="container-fluid jumbotron">
        <div className="input-group mb-3">
          <input
            type="text"
            className="form-control shadow-none"
            placeholder="Search Pokemon"
            value={text}
            onChange={(e) => setText(e.target.value)}
          />
          <div className="input-group-append">
            <span
              className="input-group-text"
              id="basic-addon2"
              onClick={Search}
            >
              Search
            </span>
          </div>
        </div>
      </div>

      {data.map((dat, index) => {
        return (
          <div key={index}>
            <h2>{dat.name}</h2>
        <img src={dat.sprites.other.dream_world.front_default} />
          </div>
        );
      })}

    </div>
  );
};

export default Pokemonapi;

Answer 1

這取決於 api 返回的是什么，如果它返回圖像的 url，您可以使用
<img src={dat.sprites.other.dream_world.front_default} /> ，假設front_default=url但如果它返回圖像的 base64 編碼，那么您需要使用

<img src=`data:image/png;base64,${dat.sprites.other.dream_world.front_default}` />