インストール後、画像とスタイルシートは読み込まれません。テキストのみが表示され、グラフィックは表示されません
この記事では、Adobe Commerceのインストール後にスタイルシートと画像が読み込まれない問題の理由と解決策について説明します。
影響を受ける製品とバージョン
- Adobe Commerce 2.2.x, 2.3.x#キョウジ 2.2.x#
- Magento Open Source2.2.x, 2.3.x
問題
再現手順
- Adobe Commerceをインストールします。
- ストアフロントまたは管理者に移動します。
期待される結果
スタイルが適用されます。スタイルが見つからないような UI 要素はありません。
実際の結果
スタイルが正しく適用されず、グラフィックが欠落している。
原因：
ベース URL が正しくないか、サーバーの書き換え（CentOS、Ubuntu）が正しく設定されていないので、画像とスタイルシートへのパスが正しくありません。
その場合は、web ブラウザー検査を使用して静的アセットへのパスを確認し、それらのアセットがAdobe CommerceまたはMagento Open Sourceのファイルシステム上にあることを確認します。
静的アセットはの下に配置されます。 <magento_root>/pub/static/ 、内 frontend および adminhtml ディレクトリ。
解決策
使用しているソフトウェアと問題の原因に応じて、次のような解決策が考えられます。
-
Apache web サーバーを使用している場合は、 サーバーの書き換え とAdobe Commerce/Magento Open Sourceサーバーのベース URL を設定し、もう一度試してください。 Apache
AllowOverrideディレクティブが正しくない場合、静的ファイルは正しい場所から提供されません。 -
nginx web サーバを使用している場合は、次の点に注意してください 仮想ホストファイルの設定. nginx 仮想ホストファイルは、次の条件を満たす必要があります。
- この
includeディレクティブは、Adobe Commerce/Magento Open Sourceのインストールディレクトリにあるサンプル nginx 設定ファイルを指す必要があります。 例：include /var/www/html/magento2/nginx.conf.sample; - この
server_nameディレクティブは、Adobe Commerce/Magento Open Sourceをインストールするときに指定したベース URL と一致する必要があります。 例：server_name 192.186.33.10;
- この
-
アプリケーションが 実稼動モードを使用して静的ビューファイルをデプロイしてみてください
magento setup:static-content:deployコマンド。 静的ファイルのデプロイについて詳しくは、次を参照してください： 静的表示ファイルのデプロイ 開発者向けドキュメントを参照してください。