Mostrar imágenes localizadas en la carpeta public

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.

Problema

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)
    }
  }

imagenes de banderas en la carpeta public react

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,
  ....

Retornar

18 - Mostrar imágenes localizadas en la carpeta public

Problema