HOWTO · React

logotipo de React

Este tutorial demuestra cómo agregar un logotipo en React.

Por Rana Hasnain KhanPublicado 2022-04-18Actualizado 2026-11-02
En esta página

Presentaremos cómo añadir un logo en la aplicación React.

Añadir un logo en React

Hoy en día, cada sitio web tiene su logo y imágenes.

Cuando creamos una aplicación React, primero queremos cambiar el logotipo, y a algunas personas les resulta difícil mostrar la imagen en una aplicación React. Discutiremos cómo mostrar su logotipo en una aplicación React con un código simple.

En primer lugar, guardaremos nuestro logo en la carpeta src. Una vez hayamos guardado nuestro logo, ahora lo importaremos dentro del archivo que queramos mostrarlo.

Utilice el siguiente código para importar el logo.

# react 
import logo from './logo.svg';

Una vez que hayamos importado nuestro logo dentro de la página donde queremos mostrarlo, crearemos una vista para él.

# react
<img src={logo} className="App-logo" alt="logo">

El siguiente diagrama recorre ese camino desde el archivo en src hasta la imagen mostrada.

Diagrama de flujo que muestra cómo un archivo de logotipo importado desde src se convierte en la imagen que muestra un componente de React: el archivo de imagen del logotipo, un recurso de imagen, se guarda en la carpeta src; con import logo from ‘./logo.svg’ el empaquetador procesa el archivo y la variable logo recibe la URL de la imagen; el componente renderiza un elemento img con src establecido en esa URL importada; el navegador muestra la imagen del logotipo en la página. El recurso de ejemplo de este artículo es la propia imagen del logotipo, una imagen y no una captura de pantalla de la página. Diagrama instructivo dibujado, no una captura de pantalla.

Diagrama: archivo de logotipo en src → importación → el elemento img del componente → la imagen mostrada.

En el código proporcionado, podemos ver que en el atributo src, estamos llamando a una variable {logo}. Esta variable generará la URL del logotipo que importamos.

Escribiremos el código CSS para cambiar el tamaño del logotipo según nuestras necesidades.

# react
.App-logo{
    width: 150px;
}

Veamos nuestro logotipo.

Producción:

React logotipo

Ahora hemos aprendido cómo mostrar fácilmente nuestras imágenes o logotipos en la aplicación React.

Sobre el autor

Rana Hasnain Khan

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

Ver el perfil del autor
LinkedIn