After installing, images and stylesheets do not load; only text displays, no graphics
This article describes the possible reasons and solutions for the issue where stylesheets and images do not load after installing Adobe Commerce.
Affected products and versions
- Adobe Commerce 2.2.x, 2.3.x
- Magento Open Source 2.2.x, 2.3.x
Issue
Steps to reproduce
- Install Adobe Commerce.
- Navigate to the storefront or Admin.
Expected result
Styles are applied, no UI element looks like missing styles.
Actual result
Styles are not applied correctly, graphics is missing.
Cause
The path to images and stylesheets is not correct, either because of an incorrect base URL or because server rewrites (CentOS, Ubuntu) are not set up properly.
To confirm this is the case, use a web browser inspector to check the paths to static assets and verify those assets are located on the Adobe Commerce or Magento Open Source file system.
Static assets are located under <magento_root>/pub/static/
, within the frontend
and adminhtml
directories.
Solution
The following are possible solutions depending on the software you use and the cause of the problem:
-
If you are using the Apache web server, verify your server rewrites setting and your Adobe Commerce/Magento Open Source server’s base URL and try again. If you set up the Apache
AllowOverride
directive incorrectly, the static files are not served from the correct location. -
If you are using the nginx web server, be sure to configure a virtual host file. The nginx virtual host file must meet the following criteria:
- The
include
directive must point to the sample nginx configuration file in your Adobe Commerce/Magento Open Source installation directory. For example:include /var/www/html/magento2/nginx.conf.sample;
- The
server_name
directive must match the base URL you specified when installing Adobe Commerce/Magento Open Source. For example:server_name 192.186.33.10;
- The
-
If the application is in production mode, try deploying static view files using the
magento setup:static-content:deploy
command. For details about deploying static files refer to Deploy static view files in our developer documentation.