絶対パスで特定のSRC（相対パス）を使用して画像を更新する

このjQueryコードスニペットは、画像

属性を修正して絶対パスを使用し、相対パスを指定されたドメインを使用して絶対パスに変換します。 これは、クロスドメインテストや外部ドメインから画像を調達する場合に役立ちます。 src

この改良されたバージョンは、より堅牢な正規表現（

<code class="language-javascript">(function ($) {
    $(document).ready(function () {
        $('img').each(function (i, v) {
            let $el = $(this),
                src = $el.attr('src'),
                //Improved regex to handle various relative path structures
                srcRx = /^\/?[^:]+/; // Matches leading slash (optional) followed by non-colon characters

            if (srcRx.test(src)) {
                let absoluteSrc = 'http://splash.abc.net.au' + (src.startsWith('/') ? src : '/' + src);
                $el.attr('src', absoluteSrc);
            }
        });
    });
})(jQuery);</code>

）を使用して、リードのスラッシュもない相対パスを正しく識別します。また、ベースURLを追加する前に、相対パスから欠落している場合、主要なスラッシュが追加されることを保証します。 これにより、パス構築が誤っていない潜在的な問題が防止されます この改善されたコードを実証する

a jsfiddleは[JSFiddleリンク - （作成された場合は実際のJSFiddleリンクに置き換えます）]で利用できます。 （注：jsfiddleリンクを動的に作成できません）。srcRx

ベンアルマンの優れた

プラグインは、相対パスや絶対パスを効果的に処理するなど、より包括的なURL操作機能を提供します。 [github link--（実際のgithubリンクに置き換えます）]。

相対的および絶対的なパスに関するよくある質問（FAQ）jquery.ba-urlinternal.js

このセクションは、Web開発の文脈における相対的および絶対的なパスに関する一般的な質問に答えます。 相対パスと絶対パスの違いは何ですか？

絶対パス：ウェブサイトのルートからファイルまたはリソースの完全な場所を指定します（例：

）。

• 相対パス：現在のファイルの場所に対するファイルの場所を指定します。 ドメインを省略し、多くの場合、（ルート相関）で始まるか、https://www.example.com/images/logo.pngを使用してディレクトリレベルを上げます（例：
または
• ）。 /jqueryで../属性の値を取得するにはどうすればよいですか？ /images/logo.png ../images/logo.pngメソッドを使用してください：
これにより、最初の画像の

が取得されます。 すべての画像を反復するには、

を使用してください： src

html？

の相対パスと絶対パスの違いは何ですか（上記と同じですが、htmlのコンテキスト）.attr() $('img').attr('src');src絶対パスの問題を解決するにはどうすればよいですか？ .each()パスが正しく、ファイルが存在することを確認してください。絶対パスと現在のHTMLファイルに関する相対パスの位置についてURLをダブルチェックします。

<code class="language-javascript">$('img').each(function() {
  console.log($(this).attr('src'));
});</code>

jquery？

（上記のjqueryの例と同じ）のページ上のすべての画像の属性を配列に保存するにはどうすればよいですか：

以上が絶対パスで特定のSRC（相対パス）を使用して画像を更新するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。