nuevo para reaccionar aquí. Como dice el título, tengo un JSON que contiene datos que estoy tratando de representar. Se muestra todo menos las fotos. ¿Cómo puedo hacer que se muestren? Aquí está mi código:
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;El resultado final debería ser así: https://i.imgur.com/FV4B6fg.png
Puede usar una etiqueta img para representar el avatar del usuario,
<td> <img src={user.avatar} /> </td>Como necesita representar el enlace como una imagen, debe usar la etiqueta img.
<img src={user.avatar} alt=""/>Si necesita establecer el ancho o la altura, puede hacer lo siguiente.
<img src={user.avatar} alt="" width="200px"/>Desea usar img y {user.avatar} devolverá la URL de la imagen, por lo que si tiene un enlace de img, en lugar de usarlo directamente en la etiqueta <td> , utilícelo como:
<td><img src={user.avatar} alt="text" /></td>
como desea usar img, debe usar la etiqueta <img> .
import React, { useEffect, useState } from 'react';
importar './Aplicación.css';
aplicación de función () {
const [usuarios, establecerUsuarios] = 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 ((usuario, índice) => <tr key={index}> <td>{user.first_name}</td> <td >{usuario.apellido}</td> <td>{ usuario.email }</td> <td><img src={usuario.avatar} alt="texto" /></td>
</tr> ) } </tbody> </table> </div> ); }exportar aplicación predeterminada;