La primer forma de trabajar con imágenes es React, es localizando los mismos en la carpeta public o una subcarpeta de la misma.
Si abrimos el archivo index.html que tiene todo proyecto en React podremos ver que el archivo favicon.ico se localiza en la carpeta public:
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
Luego cuando compilamos la aplicación React se remplaza la variable de entorno PUBLIC_URL y queda según el valor inicializado (si no hacemos nada cuando creamos un proyecto luego tiene un path nulo):
<link rel="icon" href="/favicon.ico" />
Con un problema veremos como trabajar con una serie de imágenes.
Crear una aplicación que muestre una bandera de un país una a la vez, permitir con dos botones cambiar a la siguiente o anterior bandera.
Como primer paso creamos una aplicación con create-react-app:
npx create-react-app proyecto018
Creamos en la carpeta 'public' una subcarpeta llamada 'imagenes' y en la misma almacenamos 8 imágenes de banderas:
Modificamos el archivo App.js:
App.js
import React from 'react' export default function App() { const banderasPaises = ['argentina.png', 'chile.png', 'uruguay.png', 'bolivia.png', 'peru.png', 'venezuela.png', 'brasil.png', 'colombia.png'] const [banderaSeleccionada, setBanderaSeleccionada] = React.useState(0) function banderaSiguiente() { if (banderaSeleccionada < banderasPaises.length - 1) { setBanderaSeleccionada(banderaSeleccionada + 1) } } function banderaPrevia() { if (banderaSeleccionada > 0) { setBanderaSeleccionada(banderaSeleccionada - 1) } } return ( <div> <h1>Banderas de paises Latinoamericanos</h1> <p><img src={process.env.PUBLIC_URL + "/imagenes/" + banderasPaises[banderaSeleccionada]} alt="bandera" /></p> <p> <input type="button" value="<" onClick={banderaPrevia} /> <input type="button" value=">" onClick={banderaSiguiente} /> {banderasPaises[banderaSeleccionada]} </p> </div> ) }
Definimos un arreglo con 8 nombres de archivos de las imágenes:
const banderasPaises = ['argentina.png', 'chile.png', 'uruguay.png', 'bolivia.png', 'peru.png', 'venezuela.png', 'brasil.png', 'colombia.png']
Definimos un Hook de estado con el número de subíndice del arreglo que indicará la bandera visible actual:
const [banderaSeleccionada, setBanderaSeleccionada] = React.useState(0)
En el bloque JSX procedemos a mostrar la imágen actual mediante la sintaxis:
<p><img src={process.env.PUBLIC_URL + "/imagenes/" + banderasPaises[banderaSeleccionada]} alt="bandera" /></p>
Primero disponemos la variable process.env.PUBLIC_URL, el resto del path es la carpeta 'imagenes' que creamos nosotros y luego el nombre de la imagen a mostrar la recuperamos del arreglo 'banderasPaises' y utilizamos el valor de la variable 'banderaSeleccionada' (inicialmente tiene el valor 0)
Para poder cambiar de bandera que se muestra disponemos dos botones:
<input type="button" value="<" onClick={banderaPrevia} /> <input type="button" value=">" onClick={banderaSiguiente} />
Y mediante dos funciones procedemos a incrementar o decrementar la variable 'banderaSeleccionada':
function banderaSiguiente() { if (banderaSeleccionada < banderasPaises.length - 1) { setBanderaSeleccionada(banderaSeleccionada + 1) } } function banderaPrevia() { if (banderaSeleccionada > 0) { setBanderaSeleccionada(banderaSeleccionada - 1) } }
Podemos probar ahora la aplicación que muestra las imágenes localizadas en la carpeta public/imagenes/: aquí
Recordar que si subimos nuestra aplicación a una subcarpeta de nuestro servidor debemos modificar el archivo 'package.json', agregando dicho path:
{ "name": "proyecto018", "homepage": "https://www.scratchya.com.ar/reactya/proyecto018/", "version": "0.1.0", "private": true, ....