DocumentationCommerceCommerce KB

Après l’installation, les images et les feuilles de style ne se chargent pas ; seul le texte s’affiche, aucun graphique

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Rubriques :

Créé pour :

  • Administration

Cet article décrit les raisons et solutions possibles pour le problème où les feuilles de style et les images ne se chargent pas après l’installation d’Adobe Commerce.

Produits et versions concernés

  • Adobe Commerce 2.2.x, 2.3.x
  • Magento Open Source 2.2.x, 2.3.x

Problème

Étapes à reproduire

  1. Installez Adobe Commerce.
  2. Accédez au storefront ou à l’administrateur.

Résultat attendu

Des styles sont appliqués, aucun élément d’interface utilisateur ne ressemble à des styles manquants.

Résultat réel

Les styles ne sont pas correctement appliqués, les graphiques sont manquants.

Cause

Le chemin d’accès aux images et aux feuilles de style n’est pas correct, soit en raison d’une URL de base incorrecte, soit parce que les réécritures du serveur (CentOS, Ubuntu) ne sont pas correctement configurées.

Pour confirmer ce cas, utilisez un inspecteur de navigateur web pour vérifier les chemins d’accès aux ressources statiques et vérifier que ces ressources se trouvent sur le système de fichiers Adobe Commerce ou Magento Open Source.

Les ressources statiques sont situées sous <magento_root>/pub/static/ , dans les répertoires frontend et adminhtml .

Solution

Voici les solutions possibles en fonction du logiciel que vous utilisez et de la cause du problème :

  • Si vous utilisez le serveur web Apache, vérifiez le paramètre server rewrites et l’URL de base de votre serveur Adobe Commerce/Magento Open Source, puis réessayez. Si vous configurez la directive Apache AllowOverride de manière incorrecte, les fichiers statiques ne sont pas diffusés à partir du bon emplacement.

  • Si vous utilisez le serveur web nginx, veillez à configurer un fichier d'hôte virtuel. Le fichier d’hôte virtuel nginx doit répondre aux critères suivants :

    • La directive include doit pointer vers l’exemple de fichier de configuration nginx dans votre répertoire d’installation Adobe Commerce/Magento Open Source. Par exemple : include /var/www/html/magento2/nginx.conf.sample;
    • La directive server_name doit correspondre à l’URL de base que vous avez spécifiée lors de l’installation d’Adobe Commerce/Magento Open Source. Par exemple : server_name 192.186.33.10;

  • Si l’application est en mode de production, essayez de déployer les fichiers d’affichage statique à l’aide de la commande magento setup:static-content:deploy. Pour plus d’informations sur le déploiement des fichiers statiques, reportez-vous à la section Déploiement de fichiers d’affichage statique de notre documentation destinée aux développeurs.

recommendation-more-help
8bd06ef0-b3d5-4137-b74e-d7b00485808a