Mettre à jour les images avec un SRC spécifique (chemin relatif) avec un chemin absolu

Cet extrait de code jQuery modifie l'image src Attributs pour utiliser des chemins absolus, convertissant des chemins relatifs en un domaine absolu en utilisant un domaine spécifié. Ceci est utile pour les tests de domaine croisé ou lors de l'approvisionnement en images à partir d'un domaine externe.

<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>

Cette version améliorée utilise une expression régulière plus robuste (srcRx) pour identifier correctement les chemins relatifs, même ceux sans slash de premier plan. Il garantit également qu'une tronçonneuse principale est ajoutée si elle manque sur le chemin relatif avant d'ajouter l'URL de base. Cela empêche les problèmes potentiels avec une construction de chemins incorrecte.

Un jsfiddle démontrant que ce code amélioré est disponible sur [JSFiddle lien - (remplacer par la liaison jsfiddle réelle si créé)]. (Remarque: je ne peux pas créer un lien jsfiddle dynamiquement).

Le plugin Excellent jquery.ba-urlinternal.js de Ben Alman fournit des capacités de manipulation d'URL plus complètes, y compris la gestion efficace des chemins relatifs et absolus. Vous pouvez le trouver sur [GitHub Link - (remplacer par un lien GitHub réel)].

Questions fréquemment posées (FAQ) sur les chemins relatifs et absolus

Cette section répond aux questions courantes sur les chemins relatifs et absolus dans le contexte du développement Web.

Quelle est la différence entre les chemins relatifs et absolus?

• Chemin absolu: Spécifie l'emplacement complet d'un fichier ou d'une ressource à partir de la racine du site Web (par exemple, https://www.example.com/images/logo.png).
• Chemin relatif: Spécifie l'emplacement d'un fichier par rapport à l'emplacement du fichier actuel. Il omet le domaine et commence souvent par un / (relatif racinaire) ou utilise ../ pour augmenter un niveau de répertoire (par exemple, /images/logo.png ou ../images/logo.png).

comment puis-je obtenir la valeur de l'attribut src dans jQuery?

Utilisez la méthode .attr(): $('img').attr('src'); Cela obtient le src de la première image. Utilisez .each() pour parcourir toutes les images:

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

Quelle est la différence entre les chemins relatifs et les chemins absolus dans HTML? (Identique à celle ci-dessus, mais dans le contexte de HTML)

Comment résoudre le problème src Absolute Path?

Assurez-vous que le chemin est correct et que le fichier existe. Vérifier les URL pour les chemins absolus et la position du chemin relatif concernant le fichier HTML actuel.

comment puis-je obtenir l'attribut src de toutes les images sur une page avec jQuery? (Identique à l'exemple jQuery ci-dessus) pour les stocker dans un tableau:

<code class="language-javascript">let srcs = [];
$('img').each(function() {
  srcs.push($(this).attr('src'));
});</code>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!