Hi, I'm working with Reactjs and trying to create a simple application. In the render () method of one of my components, I'm using an etch to put an image and it's not showing in the browser, instead the alternative text is shown, here's the code:
class ProductDetails extends React.Component {
render() {
const description = this.props.data.descripcion.map(tip => {
return <li>{tip}</li>
});
return(
<div className="borde">
<img src={this.props.data.url} alt="imagen no encontrada" className="imgDetalle"/>
<h2 className="borde">{this.props.data.itemTitle}</h2>
<h3 className="borde">{this.props.data.price}</ h3>
<ul>Descripción
{description}
</ul>
</div>
);
}
}
class App extends Component {
render() {
let data = ['Autos', 'Motos'];
const dataDetails =
{
imgUrl: 'https://i.imgur.com/E2PbxmA.jpg',
itemTitle: 'Lavadora LG',
price: '$ '+ 1000,
descripcion: ['10 Kg de ropa a lavar', '6.5 Kg para secado', '10 años de Garantía']
}
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">TIENDA</h1>
</header>
<MenuLateral itemList={data}/>
<ProductDetails data={dataDetails}/>
</div>
);
}
}The first is the component that is responsible for displaying the image and the second is responsible for rendering the first with its attributes via props. The rest of the attributes are displayed correctly, the only problem is with the image. If you could help me. Thanks