0

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.

1 respuesta 1

0

Conseguí resolverlo. Simplemente moví la carpeta assets (que contiene las imágenes) de la carpeta src a la carpeta public. Luego no hace falta hacer ningún import de las imágenes.

El código queda tal que así.

articulos.js

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

import React from 'react';

export const Articulo = ({name, price, image, width}) => {

return (
    <div className="articulo" style={{width: width}}>
        

        <img src={`/assets/${image}.jpg`} alt={name} />
        <p>{name}</p>
        <p>{price}</p>
        <button class="btn-anadir">AÑADIR</button>
    </div>
)
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.