Saltar al contenido

¿Cómo añadir imágenes en React.jsOct, 19thIn este tutorial, vamos a aprender acerca de cómo agregar imágenes y …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de cómo agregar imágenes e imágenes de fondo en el reaccionar aplicación con la ayuda de ejemplos.

Adición de imágenes a los componentes

En reaccionar componentes, podemos importar imágenes al igual que los módulos de JavaScript donde webpack incluye el archivo de imagen en un paquete y devuelve la ruta final de una imagen.

Ejemplo:

import React from 'react';
import car from './images/car.jpg'; // gives image path
function App(){
return(

this is car image

)
}

export default App;

Para reducir las solicitudes de red y mejorar el rendimiento de la web importación de imágenes que son menos de 10.000 bytes de datos devuelve un URI en lugar de una ruta de acceso.

Adición de imágenes de fondo en CSS

.app{
background-image: url(./images/car.jpg);
}

Mediante la adición de la ruta relativa de una imagen en CSS, webpack los reemplaza por un camino final del paquete compilado.