使用 axios 从 json url 获取图像

Posted 2023-02-23

【中文标题】使用 axios 从 json url 获取图像

【英文标题】：get images from json url using axios

【发布时间】：2021-04-12 06:21:05

【问题描述】：

我是 React 的初学者，试图从 https://api.randomuser.me 获取图像 我正在使用 axios 创建对 api 的获取请求并在 img-wrapper div 中显示图像，但图像没有被导入。我能够获取字符串数据。当我尝试在 img src 中使用 map 时，我收到错误“预期分配或函数调用，而是看到一个表达式”

reactjs

class form extends Component
    constructor(props)
        super(props);

        this.state=
            answer:'',
            persons:[]
        
        this.handleChange=this.handleChange.bind(this);
        this.handleSubmit=this.handleSubmit.bind(this);
    

    componentDidMount()
        axios.get('https://api.randomuser.me')
            .then(res=>
                this.setState( persons: res.data.results );
                
            )
    

render()
 
        return (
            <div>
                <section className="login">
                    <div className="loginContainer">
                        <div className="heading">
                        </div>
                        <div className="img-wrapper">
                          
                            <img src=this.state.persons.map(person=>person.picture.large)/>
                          
                        </div>

json

  "results": [
    
      "picture": 
        "large": "https://randomuser.me/api/portraits/men/79.jpg",
        "medium": "https://randomuser.me/api/portraits/med/men/79.jpg",
        "thumbnail": "https://randomuser.me/api/portraits/thumb/men/79.jpg"
      ,
      "nat": "FI"
    
  ],
  "info": 
    "seed": "0019bcd5bce99412",
    "results": 1,
    "page": 1,
    "version": "1.3"
  

【参考方案1】：

使用Array.map() 迭代this.state.persons 并渲染imgs。

this.state.persons.map(person => 
  <img src=person.picture.large/>
)