Kemas kini imej dengan Src tertentu (laluan relatif) dengan jalan mutlak

Coretan kod jQuery ini mengubahsuai imej src atribut untuk menggunakan laluan mutlak, menukar laluan relatif kepada yang mutlak menggunakan domain yang ditentukan. Ini berguna untuk ujian silang domain atau apabila mendapatkan imej dari domain luaran.

(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);

Versi yang lebih baik ini menggunakan ekspresi biasa yang lebih mantap (

) untuk mengenal pasti laluan relatif dengan betul, walaupun mereka yang tidak mempunyai slash terkemuka. Ia juga memastikan bahawa slash terkemuka ditambah jika ia hilang dari laluan relatif sebelum memasuki URL asas. Ini menghalang isu -isu yang berpotensi dengan pembinaan jalan yang salah. srcRx

Jsfiddle yang menunjukkan kod yang lebih baik ini boleh didapati di [JSFiddle Link - (ganti dengan pautan JSFiddle sebenar jika dibuat)]. (Nota: Saya tidak dapat membuat pautan jsfiddle secara dinamik).

Plugin Ben Alman yang sangat baik

menyediakan keupayaan manipulasi URL yang lebih komprehensif, termasuk mengendalikan laluan relatif dan mutlak dengan berkesan. Anda boleh menemuinya di [github link - (ganti dengan pautan github sebenar)]. jquery.ba-urlinternal.js

Soalan Lazim (Soalan Lazim) Mengenai Laluan Relatif dan Mutlak

Bahagian ini menjawab soalan umum mengenai laluan relatif dan mutlak dalam konteks pembangunan web.

Apakah perbezaan antara laluan relatif dan mutlak?

• Laluan mutlak: Menentukan lokasi lengkap fail atau sumber dari akar laman web (mis., ). https://www.example.com/images/logo.png
• Laluan Relatif: Menentukan lokasi fail berbanding dengan lokasi fail semasa. Ia menghilangkan domain dan sering bermula dengan (root-relative) atau menggunakan / untuk naik tahap direktori (mis., ../ atau /images/logo.png). ../images/logo.png

bagaimana saya mendapat nilai atribut dalam jQuery? src

Gunakan kaedah

: .attr() Ini mendapat $('img').attr('src'); imej pertama. Gunakan src untuk melangkah melalui semua imej: .each()

$('img').each(function() {
  console.log($(this).attr('src'));
});

Apakah perbezaan antara laluan relatif dan mutlak dalam html? (sama seperti di atas, tetapi dalam konteks html)

bagaimana saya menyelesaikan masalah jalan mutlak? Pastikan laluan betul dan failnya wujud. URL-URL untuk laluan mutlak dan kedudukan laluan relatif mengenai fail HTML semasa. src

Bagaimana saya mendapatkan atribut

semua imej pada halaman dengan jQuery?

(sama seperti contoh jQuery di atas) untuk menyimpannya dalam array:

Atas ialah kandungan terperinci Kemas kini imej dengan Src tertentu (laluan relatif) dengan jalan mutlak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!