Estoy trabajando con REACT. No consigo mostrar imágenes de una forma eficiente. La única forma que he encontrado de mostrar las imágenes es así:
Tengo un archivo articulos.js con los datos que quiero mostrar. En este archivo voy importando una a una las imágenes, pero esto no es factible, hay como 20 imágenes.
articulos.js
import abrigo1 from '../assets/images/abrigo1.jpg';
import camiseta1 from '../assets/images/camiseta1.jpg';
import abrigo1 from '../assets/images/abrigo1.jpg';
export const articulos = [
{
'id': '1',
'name': 'Camiseta manga corta',
'price': '30,99',
'image': camiseta1
},
{
'id': '2',
'name': 'Abrigo',
'price': '25,99',
'image': abrigo1
},
{
'id': '3',
'name': 'Vestido largo flores rosa',
'price': '25,99',
'image': 'vestido1
}
}
Articulo.js Este Componente es la vista dónde muestro las imágenes
import React from 'react';
export const Articulo = ({name, price, image, width}) => {
return (
<div className="articulo" style={{width: width}}>
<img src={image} alt={name} />
<p>{name}</p>
<p>{price}</p>
<button>Añadir</button>
</div>
)
}
Estructura de la App:
src
|-----assets
|-----images
|-----abrigo1.jpg
|-----vestido1.jpg
|-----camiseta1.jpg
|-----components
|-----Articulo.js
|-----data
|-----articulos.js
Lo he intentado hacer de otras cuantas formas y no hay manera.