如何从JSON中获取图像链接以在react应用程序中渲染

Question

new在此处作出反应。正如标题所说，我有一个JSON，里面有我试图渲染的数据。除了照片外，一切都在展出。我怎样才能让他们表现出来。这是我的代码：

import React, { useEffect, useState } from 'react';
import './App.css';
function App() {
  const [users, setUsers] = useState([]);
  useEffect(() => {
    fetch('https://reqres.in/api/users')
    .then(response => response.json())
    .then(resData => setUsers(resData.data))
  }, []);
  return (
    <div className="App">
      <table>
        <tbody>
        {
          users.map((user, index) => 
           <tr key={index}>
             <td>{user.first_name}</td>
             <td>{user.last_name}</td>
             <td>{user.email}</td>
             <td>{user.avatar}</td>
           </tr>
          )
        }
        </tbody>
      </table>
     </div>
  );
}
export default App;

最终结果应该是这样的：https://i.stack.imgur.com/nN1JX.png

Answer 1

您可以使用img标记来呈现用户化身，

 <td>
  <img src={user.avatar} />
 </td>

Answer 2

由于需要将链接呈现为图像，因此应该使用img标记。

<img src={user.avatar} alt=""/>

如果需要设置宽度或高度，可以执行以下操作。

<img src={user.avatar} alt="" width="200px"/>

Answer 3

你想使用img，{user.avatar}会返回图像url，所以如果你有img的链接，不要直接在<td>标签中使用它，而是像-一样使用它

<td><img src={user.avatar} alt="text" /></td>

因为您想要使用img，所以必须使用<img>标记。

Answer 4

您可以使用

<image
source={{ uri: user.avatar }}/> 

如果图像没有显示，您可以使用样式表输入样式高度和宽度

<image
style={styles.image}
source={{ uri: user.avatar }} /> 
const styles = StyleSheet.create({
image:{
height: 80,
widht: 80,
},
});