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

new to react here. As the title says, I have a JSON that has data in it that I am trying to render. Everything is showing except for the pictures. How can I make them show. Here is my code:

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;

The end result should be like this: https://i.imgur.com/FV4B6fg.png

CodePudding user response：

You can use an img tag to render user avatar,

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

CodePudding user response：

As you need to render the link as an image you should use img tag.

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

If you need to set width or height, you can do as follows.

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

CodePudding user response：

you can use

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

If the image doesn't show, you can input styling height and width with stylesheet

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

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