API 图像未呈现答案

【问题标题】：API image not renderingAPI 图像未呈现
【发布时间】：2021-08-28 21:29:02
【问题描述】：

我正在尝试显示来自 API 的图像，但图像没有出现。我已经尝试了所有可能的方法，但都证明是流产的。我没有收到任何错误，但图像在渲染的任何时候都会中断。这是我的代码：

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

function LoadCountries() {
  const [personData, setPersonData] = useState('');
  const [value, setValue] = useState(1);

  const fetchData = async () => {
    return Axios.get(`https://randomuser.me/api`)
      .then(({ data }) => {
        return data;
      })
      .catch((error) => {
        console.error(error);
      });
  };
  useEffect(() => {
    fetchData().then((personData) => {
      setPersonData(JSON.stringify(personData.results[0].picture.large));
    });
  }, []);
  return (
    <div>
      <button
        onClick={() => {
          setValue(value + 1);
          console.log(value);
        }}
      >
        Next
      </button>
      <pre>
        <img src={personData} alt='Person' />
        <br />
        {personData}
      </pre>
    </div>
  );
}

export default LoadCountries;

【问题讨论】：

personData 的值是多少？是字符串 url 还是 base64 字符串？
personData.results[0].picture.large的形状是什么？ JSON.stringify 似乎有点可疑。如果该值是图片的网址，您可能只需要setPersonData(personData.results[0].picture.large)
这是 personData 的值：“randomuser.me/api/portraits/women/91.jpg”
如果 personData 是一个 url，为什么我们需要 personData.results[0].picture.large？

标签： javascript reactjs api axios render

【解决方案1】：

它现在正在工作。我所做的只是删除了 JSON.stringify()。以下是更正：

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

function LoadCountries() {
  const [personData, setPersonData] = useState('');
  const [value, setValue] = useState(1)

  const fetchData = async () => {
    return Axios.get(`https://randomuser.me/api`)
      .then(({ data }) => {
        return data;
      })
      .catch((error) => {
        console.error(error);
      });
  };
  useEffect(() => {
    fetchData().then((personData) => {
      setPersonData(personData.results[0].picture.large);
    });
  }, []);
  return (
    <div>
      <button
        onClick={() => {
          setValue(value + 1);
          console.log(value);
        }}
      >
        Next
      </button>
      <pre>
        <img src={personData} alt='Person' />
        <br />
        {personData}
      </pre>
    </div>
  );
}

export default LoadCountries;

【讨论】：