Hola estoy trabajando con Reactjs y tratando de crear una aplicación sencilla. En el método render() de uno de mis componetes estoy usando una etigueta para poner una imagen y esta no se está mostrando en el navegador, en su lugar se muestra el texto alternativo, aquí va el código:
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>
);
}
}
El primero es el componente que se encarga de mostrar la imagen y el segundo se encarga de renderizar al primero con sus atributos via props. El resto de los atributos se muestran correctamente, el único problema es con la imagen. Si pudieran ayudarme. Gracias