Remplacer des urls d'image

Version imprimable

bonjour, j'e tente de remplacer toutes les images par des autres liens, mais je n'arrive pas à utiliser la donnée ajax qui est une nouvelle url est la réinjecté dans la balise src

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
// A $( document ).ready() block.
$(document).ready(function () {
    var allImg = $('body').find('img'); //récup toutes les balises images
    for (var i = 0; i < allImg.length; i++) { bouclage de toute les images
        var nomFile = replaceMdlImg(allImg[i]['src']); //récupération juste du nom du fichier image
        var nomAlt = allImg[i]['alt'];
 
        var urlMdl = 'http://localhost:8000/ressource/' + nomFile + '/' + nomAlt; //la nouvelle url est récupérer par webservice
        //voici un exemple de webservice :/http://test/webservice/pluginfile.php/36/mod_page/content/1/1024.png?token=4ef1d1d340fe3a90a99f70c1d4921b3a
        $.ajax({
            url: urlMdl, 
            success: function (result) {
                console.log("résultat de la requête");
                console.log(result); // /http://test/webservice/pluginfile.php/36/mod_page/content/1/1024.png?token=4ef1d1d340fe3a90a99f70c1d4921b3a
 
                allImg[i]['src'] = resultat;//indefined
            }
        });
 
 
 
    }
});

comment je dois faire pour pouvoir réinjecté la nouvelle url dans la balise img

Code:

1
2
3
 
<img src="fausse_url.jpg">  l'image ne va pas chargé 
<img src="http://test/webservice/pluginfile.php/36/mod_page/content/1/1024.png?token=4ef1d1d340fe3a90a99f70c1d4921b3a">

merci de vos réponse :)

21/05/2017, 18h36
badaze

Tu mets result puis resultat.

merci,
j'ai corriger, mais je pense qu'il faut que je fasse un callback

Code:

1
2
3
 
allImg[i]['src'] = result;//indefined
//Uncaught TypeError: Cannot set property 'src' of undefined

j'ai essayer ceci

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
// A $( document ).ready() block.
$(document).ready(function () {
    var allImg = $('body').find('img');
    for (var i = 0; i < allImg.length; i++) {
        var nomFile = replaceMdlImg(allImg[i]['src']); //récupération juste du nom du fichier image
        var nomAlt = allImg[i]['alt'];
 
        var urlMdl = 'http://localhost:8000/ressource/' + nomFile + '/' + nomAlt;
        retournUrl(allImg[i],urlMdl);
    }
});
 
 
function retournUrl(imgCourant,wbsUrl) {
    $.ajax({
        url: wbsUrl,
        success: function (result) {
            console.log("résultat de la requête");
            console.log(result + "-------------");
            return result;
        }
    });
 
    imgCourant['src'] = result;
    console.log(imgCourant['src']);
}

Code:

1
2
3
4
5
6
7
 
localhost/:1 XMLHttpRequest cannot load http://localhost:8000/ressource/http://localhost/front/img/logo_png/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access. The response had HTTP status code 404.
jquery-3.2.1.min.js:2 Uncaught ReferenceError: result is not defined
    at retournUrl (chrgImgMdl.js:27)
    at HTMLDocument.<anonymous> (chrgImgMdl.js:9)
    at j (jquery-3.2.1.min.js:2)
    at k (jquery-3.2.1.min.js:2)

21/05/2017, 19h54
badaze

La page que tu appelles renvoie quoi ?

Code:

1
2
3
4
5
 
        header('Access-Control-Allow-Origin: *'); 
        return 'http://test/moodle/webservice/pluginfile.php/'.
          $results[0]->contextid.'/'.$results[0]->component.'/'.$results[0]->filearea.'/8/'.$results[0]->source.'?token=4ef1d1d340fe3a90a99f70c1d4921b3a"';
    }

elle renvoie une url depuis lumen en php.

Pour essayer d'expliquer un peu plus voici une url 404

Code:

1
2
3
 
 
baller1.jpg:1 GET http://localhost/front/@@PLUGINFILE@@/baller1.jpg 404 (Not Found)

et mon but est de de remplacer par cette url

Code:

1
2
3
 
résultat de la requête
chrgImgMdl.js:22 http://localhost/moodle/webservice/pluginfile.php/62/mod_page/content/8/baller1.jpg?token=4ef1d1d340fe3a90a99f70c1d4921b3a

la requêt ajax donne ceci:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
    $.ajax({
        url: wbsUrl,
        success: function (result) {
            console.log("résultat de la requête");
            console.log(result + "-------------");
            return result;
        }
    });
 
    imgCourant['src'] = result;
    console.log(imgCourant['src']);

et le résultat console.log de la console donne ceci

Code:

1
2
3
4
5
6
7
8
9
 
 
chrgImgMdl.js:21 résultat de la requête
chrgImgMdl.js:22 http://localhost/moodle/webservice/pluginfile.php/62/mod_page/content/8/baller1.jpg?token=4ef1d1d340fe3a90a99f70c1d4921b3a"-------------
jquery-3.2.1.min.js:2 Uncaught ReferenceError: result is not defined
    at retournUrl (chrgImgMdl.js:27)
    at HTMLDocument.<anonymous> (chrgImgMdl.js:9)
    at j (jquery-3.2.1.min.js:2)
    at k (jquery-3.2.1.min.js:2)

Tu mets un return et en dessous tu mets imgCourant['src'] = result; ce code n'est jamais exécuté

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
function retournUrl(imgCourant,wbsUrl) {
    $.ajax({        url: wbsUrl,
        success: function (result) {
            console.log("résultat de la requête");
            console.log(result + "-------------");
            return result;
        }
    });
 
    imgCourant['src'] = result;
    console.log(imgCourant['src']);
}

21/05/2017, 20h42
keokaz

Merci en effet, à force de déplacer mes lignes, je ne savais pas ou j'en suis.
cela fonctionne :)