Después de la instalación, las imágenes y las hojas de estilo no se cargan; solo se muestra texto, sin gráficos
En este artículo se describen los posibles motivos y soluciones del problema por el que las hojas de estilo y las imágenes no se cargan después de instalar Adobe Commerce.
Productos y versiones afectados
- Adobe Commerce 2.2.x, 2.3.x
- Magento Open Source 2.2.x, 2.3.x
Problema
Pasos a seguir
- Instale Adobe Commerce.
- Vaya a la tienda o al administrador.
Resultado esperado
Si se aplican estilos, ningún elemento de la interfaz de usuario tiene el aspecto de estilos que faltan.
Resultado real
Los estilos no se aplican correctamente, faltan gráficos.
Causa
La ruta a las imágenes y hojas de estilo no es correcta, ya sea debido a una URL base incorrecta o porque las reescrituras del servidor (CentOS, Ubuntu) no están configuradas correctamente.
Para confirmar que este es el caso, utilice un inspector del explorador web para comprobar las rutas a los recursos estáticos y comprobar que dichos recursos se encuentran en el sistema de archivos de Adobe Commerce o de Magento Open Source.
Los recursos estáticos se encuentran en <magento_root>/pub/static/ , en los directorios frontend y adminhtml.
Solución
Las siguientes son posibles soluciones según el software que utilice y la causa del problema:
-
Si está usando el servidor web Apache, verifique la configuración de reescribe el servidor y la URL base del servidor Adobe Commerce/Magento Open Source e inténtelo de nuevo. Si configuró la directiva Apache
AllowOverrideincorrectamente, los archivos estáticos no se proporcionan desde la ubicación correcta. -
Si está usando el servidor web nginx, asegúrese de configurar un archivo host virtual. El archivo host virtual nginx debe cumplir los siguientes criterios:
- La directiva
includedebe apuntar al archivo de configuración nginx de ejemplo en el directorio de instalación de Adobe Commerce/Magento Open Source. Por ejemplo:include /var/www/html/magento2/nginx.conf.sample; - La directiva
server_namedebe coincidir con la dirección URL base especificada al instalar Adobe Commerce/Magento Open Source. Por ejemplo:server_name 192.186.33.10;
- La directiva
-
Si la aplicación se encuentra en modo de producción, intente implementar archivos de vista estática mediante el comando
magento setup:static-content:deploy. Para obtener más información sobre la implementación de archivos estáticos, consulte Implementar archivos de vista estática en nuestra documentación para desarrolladores.