0

en mi webpack.config.js

{
            test: /\.(png|jp(e*)g|svg)$/,  
            use: [{
                loader: 'url-loader',
                options: { 
                    limit: 8000, // Convert images < 8kb to base64 strings
                    name: 'images/[hash]-[name].[ext]'
                } 
            }]
        },

y mi componente

import React from 'react';
import auroraImagen from './../imagenes/aurora.jpg';
var envoltura = {
    backgrounImage: 'url(' + auroraImagen + ')'
};
const Hogar = () => {
    return(<div 
        style={envoltura}
        className='hogar-contenedor'>
        <h2 className='hogar__titulo'
        >Bienvenido a casa.</h2>
        <image >

        </image>

    </div>);
}; export default Hogar;

pero no renderiza la imagen el fondo, las imagenes estan guardadas en src/imagenes/

1 respuesta 1

0

Puede ser porque en 'webpack.config.js' en 'name' dice "images" y no "imagenes" ?

La otra que se me ocurre es que sea porque el path relativo de las imágenes en el componente no está llegando a la ruta real de las imágenes.

Cual es el path absoluto del componente y de las imágenes?

2
  • .hogar-contenedor { background-color: lightslategray; height: 60rem; margin-top: -45px; background-image:url(./../imagenes/aurora.jpg) no-repeat center center fixed; } Commented el 6 abr. 2018 a las 22:44
  • las imagenes se encuentran en src/imagenes/aurora.jpg Commented el 6 abr. 2018 a las 22:46

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.