Saltar al contenido principal

Recursos estáticos

La aplicación Jutro (y las aplicaciones creadas con ella) se basan en create-react-app. Debido a esto, se aplican las mismas recomendaciones en cuanto a las herramientas.

Ubicación de recursos estáticos​

Las aplicaciones generadas por create-react-app utilizan el directorio ./public para mantener recursos estáticos (imágenes, etc.), pero, en su lugar, la aplicación Jutro utiliza ./src/assets.

Ese directorio personalizado se configura utilizando la propiedad paths.appPublic en ./overrides.config.js. Todos los archivos en ese directorio son recursos estáticos y se puede hacer referencia a ellos fácilmente en tiempo de ejecución. La única excepción aquí es index.html, que está dentro de la carpeta ./html.

URI de datos​

Para evitar problemas de agrupación y Webpack, puede usar URI de datos para las imágenes. De este modo, no se hace referencia a un archivo de imagen, sino que se incrusta la imagen en el origen. Puede usar SVG integrado en las propiedades:

<Image
  src="data:image/svg+xml;utf8,<svg ... > ... </svg>"
  alt="cooking apron"
/>

o en CSS:

.background {
  background: url('data:image/svg+xml;utf8,<svg ...> ... </svg>');
}

También puede codificar una imagen en Base64 y agregarla como una propiedad:

<Image
  alt=""
  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDo etc"
/>

o en CSS:

.background {
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDo etc');
}

Referencia a recursos estáticos en el código​

Dependiendo del lugar donde se encuentre la referencia, se puede realizar de dos formas: agrupada y desagrupada.

Agrupada​

Para agrupar un recurso, impórtelo en su código JavaScript y utilícelo en un componente:

import logo from '../images/logo.svg';

<img src={logo} />;

Obtendrá más información en la documentación de create-react-app aquí.

Desagrupada​

Puede hacer referencia a los recursos de su directorio desde recursos estáticos de una de dos maneras:

  • Desde plantillas HTML usando el prefijo %PUBLIC_URL% de marcador de posición, por ejemplo: 
    <img src="%PUBLIC_URL%/<path-to-the-image-under-src-assets>" />
  • Desde el código JS (por ejemplo, como parte del render() del componente), usando la variable env PUBLIC_URL, por ejemplo: 
    render() {
        return (
            <img src={`${process.env.PUBLIC_URL}/<path-to-the-image-under-src-assets>`} />
        );
    }

Diferencia entre Dev y dist​

Cuando utiliza npm run build, copia los recursos estáticos desde ./src/assets a una ubicación adecuada en el subdirectorio ./dist, lo que hace que los recursos también estén disponibles durante el tiempo de ejecución. Recuerde mantener la referencia a los recursos utilizando PUBLIC_URL como se mencionó antes. Esta variable se resuelve en una ubicación adecuada en el momento de la compilación mediante react-scripts.