estoy tratando de mostrar unos productos. Los datos se muestran bien. Tanto el nombre como el precio. El problema viene cuando trato de mostrar las imágenes del producto. Aparecen como enlaces rotos. Enseño el código
Este es el Componente producto.
import { Component } from 'react'
class Producto extends Component {
render() {
const producto = this.props.producto
return(
<div>
<img alt={producto.name} src={producto.img} />
</div>
)
}
}
El componente Productos
import { Component } from 'react'
class Productos extends Component {
render() {
const { productos, agregarAlCarro } = this.props
return(
<div>
{productos.map(producto =>
<Producto
agregarAlCarro={agregarAlCarro}
key={producto.name}
producto={producto}
/>
)}
</div>
)
}
}
Y finalmente este es el componente App. De aquí salen los datos de los productos
import { Component } from 'react'
import Productos from './components/Productos'
class App extends Component {
state = {
productos: [
{name: 'Tomate', price: 1.50, img:'images/tomate.jpg'},
{name: 'Lechuga', price: 1.20, img:'images/lechuga.jpg'}
]
}
render() {
const { productos, agregarAlCarro } = this.props
return(
<div>
<Productos
agregarAlCarro={() => console.log("No hago nada") }
productos={this.state.productos}
/>
</div>
)
}
}
Estos son los tres componentes que tengo en mi aplicación. La estructura de carpetas es esta.
Edito: He probado con una url de una imágen que he sacado de wikipedia y ha funcionado. Pero con las imágenes de la carpeta no funciona.
img
solo pongas el nombre de la imagen y ensrc
introduzcas la ruta y luego solo llamas el nombre de la imagen con su respectivo formato.producto.js
esta dentro de la carpetacomponents
, tendrías que agregar../
antes de llamarproducto.img
../images${producto.img}
} No sé si será la forma adecuada de hacerlo,. La consola no muestra erroresimg
de tu array de productos solo introduce el nombre de la imagen con su respectivo formato ejemplo:imagen.jpg