Introducción
Cuando desarrollamos aplicaciones web con React, generalmente queremos incluir elementos visuales para captar el interés de los usuarios. Estos elementos visuales pueden ser cualquier tipo de imagen, incluidos JPG, PNG, SVG, GIF y muchos otros.
En este artículo, aprenderemos cómo importar imágenes con React y veremos las diversas formas en que se puede lograr.
Las imágenes externas y las imágenes locales son los dos tipos de imágenes que queremos usar en nuestra aplicación React. En este artículo, nos preocupamos principalmente por las imágenes locales porque las imágenes externas no requieren que las importemos.
Las imágenes externas son imágenes que ya se han alojado externamente y cualquiera puede acceder a ellas a través de una URL, mientras que las imágenes locales son imágenes que solo están disponibles para nosotros en nuestra computadora local o carpeta de proyecto y que queremos usar en nuestra aplicación.
Cómo mostrar imágenes alojadas externamente
Antes de entrar en cómo importar imágenes, es importante comprender que las imágenes alojadas en otros lugares funcionan de la misma manera que siempre hemos usado imágenes en HTML: agregando la URL al src atributo de la img tag:
const App = () => {
return (
<div>
<img src="https://reactjs.org/logo-og.png" alt="React Logo" />
</div>
);
};
¡Aprendamos ahora cómo podemos importar imágenes (locales) con React!
Cómo importar imágenes con React
Además de las imágenes externas, la forma en que se usan las imágenes en React difiere significativamente de la de otros marcos o incluso de HTML. Estas imágenes primero deben importarse a React antes de que puedan usarse en nuestra aplicación.
Esto se puede lograr de dos maneras: usando el import declaración o usando el require() función. Repasaremos ambos enfoques.
Cómo importar imágenes con React usando el importar Posicionamiento
Debido a que es más fácil de leer y comprender, el import La declaración es el método más utilizado para importar imágenes almacenadas localmente en React. Las imágenes son tratadas como exportaciones predeterminadas, y cuando los importamos, lo hacemos de la misma manera que importamos componentes. Esto se hace especificando la ruta relativa del archivo a la imagen que estamos importando:
import Logo from './images/react-logo.png';
const App = () => {
return (
<div>
<img src={Logo} alt="React Logo" />
</div>
);
};
En el código anterior, todavía usamos el img etiqueta y src atributo, pero esta vez el src El atributo recibe una variable en lugar de una cadena, que se pasa usando llaves en JSX.
Nota: Podemos importar tantas imágenes como queramos, pero cada imagen debe tener un nombre único en la declaración de importación, de lo contrario arrojará un error.
Es importante entender cómo especificar y obtener rutas relativas para archivos; de lo contrario, pueden ocurrir fallos y errores. En el ejemplo anterior, la imagen se guardó en un /src/images.
Cómo importar imágenes con React usando la función require()
El require() La función es una función de Node.js que se utiliza para incluir módulos externos de archivos distintos del archivo actual. Funciona de la misma manera que el import declaración y nos permite incluir imágenes:
let Logo = require('./images/react-logo.png');
const App = () => {
return (
<div>
<img src={Logo} alt="React Logo" />
</div>
);
};
La única diferencia es la primera línea donde requerimos la imagen a través de su ruta relativa y luego la almacenamos en una variable a la que accedimos en el img etiqueta a través de llaves.
También podemos decidir hacer esto en línea y evitar la línea adicional utilizada para asignar la imagen a una variable, ya que no es obligatorio:
const App = () => {
return (
<div>
<img src={require('./images/react-logo.png')} alt="React Logo" />
</div>
);
};
Conclusión
Aprendimos a importar imágenes locales usando el import declaración y el require() función en este artículo.
