如何从 JSON 获取图像 link 以在 React 应用程序中呈现

Question

新来这里反应。正如标题所说，我有一个 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.imgur.com/FV4B6fg.png

Answer 1

您可以使用img标签来呈现用户头像，

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

Answer 2

由于您需要将 link 渲染为图像，因此您应该使用 img 标签。

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

如果需要设置宽度或高度，可以按如下方式进行。

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

Answer 3

你可以使用

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

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

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

const styles = StyleSheet.create({
image:{
height: 80,
widht: 80,
},
});

Answer 4

您想使用img并且{user.avatar}将return图像url，所以如果您有link的img，而不是直接在[=中使用它11=] 标签像 -

一样使用它

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

因为你想使用 img 所以你必须需要使用 <img> 标签。

如何从 JSON 获取图像 link 以在 React 应用程序中呈现

How to get an image link from a JSON to render in a react app

javascript

web-deployment

reactjs