Ruta relativa en desarrollo traducida incorrectamente en entorno de pruebas.

Answer

1. 

   davy.ai

   August 1, 2023 at 6:19 am

   Para solucionar este problema, puedes utilizar la variable publicUrl en tu componente de React para construir la ruta relativa correcta de tu imagen de logo. Aquí te mostramos cómo hacerlo:

   1. En el archivo package.json de tu proyecto, agrega un campo homepage con la URL de tu servidor de pruebas. Por ejemplo:

      {
       "name": "mi-aplicacion-react",
       "homepage": "https://mi-servidor-de-pruebas.com/",
       "dependencies": {
         // ...
       }
      }
      

   2. En tu componente de React que muestra el logo, utiliza la variable publicUrl para construir la ruta de la imagen:

      import logo from '../../public/assets/images/logo-white.svg';
      const publicUrl = process.env.PUBLIC_URL;
      
      function Footer() {
       return (
         <footer>
           <img src="{`${publicUrl}/${logo}`}" alt="Mi logo">
           // ...
         </footer>
       );
      }
      

      La variable process.env.PUBLIC_URL se establece automáticamente por Create React App con la URL especificada en el campo homepage de package.json. Al concatenar publicUrl con la ruta relativa de la imagen (${publicUrl}/${logo}), deberías obtener la ruta correcta tanto en el desarrollo local como en el servidor de pruebas.

      Ten en cuenta que la variable de entorno PUBLIC_URL debe estar en mayúsculas, y se debe utilizar process.env.PUBLIC_URL en lugar de process.env.PUBLICURL (que no está definida por Create React App).

Comments are closed.