0
215
VistasReaccionar: la imagen src no está tomando la ruta a través de la API. la imagen no está definida
Soy nuevo en Reactjs. No puedo extraer la URL de la imagen de la API. Lo siento mucho si ya existen tipos similares de subprocesos en stackoverflow. El código completo está debajo. La API que utilicé es: https://api.thecatapi.com/v1/breeds
import React, { Component } from "react"; import ReactDOM from "react-dom"; const Cat = ({ cat: {name, image}, }) => { return( <div className='catMain'> <div className='catImage'> <img src={image.url} alt={name} /> </div> </div> ) } class App extends Component { state = { data: [], }; componentDidMount() { this.fetchCatData(); } fetchCatData = async () => { const url1 = "https://api.thecatapi.com/v1/breeds" const response = await fetch(url1) const data = await response.json() this.setState({ data, }) } render() { return ( <div className='main'> <div className="cats"> <div className="catsInfo"> {this.state.data.map((cat) => ( <Cat cat={cat}/> ))} </div> </div> </div> ) } } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement); 
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
Si desea mostrar todos los gatos aunque no tengan una imagen, puede hacer esto:
const Cat = ({ cat: { name, image } }) => { return ( <div className="catMain"> {image && ( <div className="catImage"> <img src={image.url} alt={name} /> </div> )} </div> ); };Luego, puede mostrar cualquier otra cosa que desee sobre el gato, sin tener que preocuparse por problemas de imagen.
·
Juan Pablo Isaza
Denunciar
0
Tienes la suposición de que cada gato tiene una imagen, ese no es el caso, por lo tanto, puedes filtrar las imágenes vacías de antemano (hay toneladas de soluciones, también se puede hacer la representación condicional):
// cat.image is an object, which is truthy value therefore you can filter by it. this.state.data.filter(cat => cat.image).map(cat => <Cat cat={cat} />) // OR, conditional rendering this.state.data.map(cat => cat.image && <Cat cat={cat} />) // Or in the component itself, etc. const Cat = ({ cat: { name, image } }) => { return image ? ( <div className="catMain"> <div className="catImage"> <img src={image.url} alt={name} /> </div> </div> ) : ( <Placeholder /> ); }; 
·
Juan Pablo Isaza
Denunciar
Responde la pregunta