展開後に外部 JavaScript ファイル内の画像への相対パスを処理するにはどうすればよいですか?

JavaScript 外部ファイルの相対パス

外部に組み込まれた JavaScript ファイルを使用する場合、相対パスがどのように機能するかを理解することが重要です。

提供されたシナリオでは、仮想ディレクトリ内のサーバーに JavaScript ファイルをデプロイするときに問題が発生します。ローカル開発環境とは異なり、JavaScript ファイル内の背景画像へのパスが不正確になります。

この問題を解決するには、外部 JavaScript ファイル内のパスが、そのファイルが含まれるページからの相対パスであることを認識することが重要です。 JavaScript ファイルの物理的な場所ではありません。これは、サーバー上のページの場所に応じてパスを調整する必要があることを意味します。

推奨される解決策は、画像参照のベース パスを定義する JavaScript 変数を使用することです。この変数は、展開場所に関係なく一貫性を保つように設定できます。

たとえば、imagePath という変数は

で宣言できます。ページのセクションにベース パスを保存します:

<script type="text/javascript">
  var imagePath = 'http://sstatic.net/so/img/';
</script>

その後、外部 JavaScript ファイルで、imagePath 変数を参照するように画像へのパスを変更できます:

$("#toggle").click(function() {
    if (left.width() > 0) {
        AnimateNav(left, right, 0);
        $(this).css("background", "url(" + imagePath + "filters_expand.jpg)");
    }
    else {
        AnimateNav(left, right, 170);
        $(this).css("background", "url(" + imagePath + "filters_collapse.jpg)");
    }
});

を定義することで、

の imagePath 変数このセクションでは、さまざまな展開シナリオにわたってイメージへの一貫したパスの管理と確保が容易になります。

以上が展開後に外部 JavaScript ファイル内の画像への相対パスを処理するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。