Aktualisieren Sie Bilder mit einem bestimmten SRC (relativen Pfad) mit absolutem Pfad

Dieser jQuery -Code -Snippet modifiziert Bild src Attribute, um absolute Pfade zu verwenden, wodurch relative Pfade mithilfe einer angegebenen Domäne in absolute Konvertiten konvertiert werden. Dies ist hilfreich für Cross-Domänen-Tests oder bei der Beschaffung von Bildern aus einer externen Domäne.

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

Diese verbesserte Version verwendet einen robusteren regulären Ausdruck (srcRx), um relative Pfade korrekt zu identifizieren, auch die ohne führenden Schrägstriche. Es stellt auch sicher, dass ein führender Schrägstrich hinzugefügt wird, wenn er auf dem relativen Pfad fehlt, bevor die Basis -URL angeht. Dies verhindert potenzielle Probleme mit falscher Pfadkonstruktion.

Ein JSFIDDLE, der diesen verbesserten Code demonstriert, ist unter [JSFIDDLE -LINK - (ersetzen Sie es durch den tatsächlichen JSFIDDLE -Link, falls erstellt)]]. (Hinweis: Ich kann nicht dynamisch einen JSFiddle -Link erstellen).

Ben Almans exzellentes jquery.ba-urlinternal.js Plugin bietet umfassendere URL -Manipulationsfunktionen, einschließlich der effektiven Handhabung von relativen und absoluten Pfaden. Sie finden es unter [Github -Link - (ersetzen Sie durch die tatsächliche Github -Verbindung)].

häufig gestellte Fragen (FAQs) zu relativen und absoluten Pfaden

Dieser Abschnitt beantwortet gemeinsame Fragen zu relativen und absoluten Pfaden im Kontext der Webentwicklung.

Was ist der Unterschied zwischen relativen und absoluten Pfaden?

• Absolutes Pfad: Gibt den vollständigen Speicherort einer Datei oder Ressource aus dem Stamm der Website an (z. B. https://www.example.com/images/logo.png).
• relatives Pfad: Gibt den Speicherort einer Datei in Bezug auf den Speicherort der aktuellen Datei an. Es lässt die Domäne weg und beginnt oft mit einem / (root-relativ) oder verwendet ../, um eine Verzeichnisebene zu erreichen (z. B. /images/logo.png oder ../images/logo.png).

Wie erhalte ich den Wert des src -attributs in jQuery?

Verwenden Sie die .attr() -Methode: $('img').attr('src'); Dies erhält die src des ersten Bildes. Verwenden Sie .each(), um alle Bilder durchzusetzen:

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

Was ist der Unterschied zwischen relativen und absoluten Pfaden in HTML?

Wie löste ich das absolute Pfadproblem

? src Stellen Sie sicher, dass der Pfad korrekt ist und die Datei existiert. Doppelprüfung URLs für absolute Pfade und die Position des relativen Pfades in Bezug auf die aktuelle HTML-Datei.

Wie bekomme ich das Attribut aller Bilder auf einer Seite mit JQuery?

Das obige ist der detaillierte Inhalt vonAktualisieren Sie Bilder mit einem bestimmten SRC (relativen Pfad) mit absolutem Pfad. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!