2
votes

Ajoutez le chemin de l'image dans le script pour obtenir l'image à partir du fichier json

Arrière-plan :

J'ai besoin d'obtenir l'image du chemin à partir du fichier json ci-dessous:

var maskedImageUrla = "";

    $.getJSON('test.json', function(json) {
        for (let layer of json.layers) {
            if (layer.layers && layer.layers.length > 0) {
                for (let temp of layer.layers) {
                    if (temp.src) maskedImageUrla = temp.src;
                    else if (temp.layers) {
                        for (let tl of temp.layers)
                            if (tl.src) maskedImageUrla = tl.src;
                    }
                }
            }
        }

J'ai réussi avec le code ci-dessous :

{
  "path" : " shape\/",
  "info" : {
    "author" : ""   
  },
  "name" : "shape",
  "layers" : [
    {     
      "height" : 612,
      "layers" : [
        {         
          "name" : "bg_rectangle_1"
        },
        {         
          "height" : 475,
          "layers" : [
            {

              "src" : "http://sitename.com/images/oneheart.png",             
              "name" : "mask_image_1"
            },
            {              
              "name" : "useradd_ellipse1"
            }
          ],          
          "name" : "user_image_1"
        }
      ],      
      "name" : "loveshape_17"
    }
  ]
}

Exigence :

Dans le fichier json ci-dessus si src est comme ceci: "src": " oneheart.png " [au lieu du chemin complet], que comment obtenir l'image? car une image existe dans ce chemin: http://sitename.com/images/oneheart.png

Voici Script complet & fichier json

p >

javascript jquery json

3 commentaires

Si le chemin est fixe, recherchez / et ajoutez l'url si elle n'est pas trouvée

@CerlinBoss Merci pour la suggestion, voulez-vous me dire d'ajouter l'URL complète dans le fichier json? désolé, j'ai des milliers de fichiers json ..... donc je dois faire avec du code .... car le chemin est le même pour tous les milliers de fichiers json ...

Vous n'avez pas besoin d'ajouter le chemin dans le fichier json. Gardez simplement une variable avec un nom de domaine comme: var a = sitename.com/images et concattez le nom du fichier lors de la création de l'élément comme ceci: imageUrl = a + obj.src

4 Réponses :

2
votes

Vous pouvez remplacer ce

if(tl.src.includes('/')){
   maskedImageUrla = tl.src
} else {
   maskedImageUrla = `http://sitename.com/images/${tl.src}`
}

par ceci

 if (tl.src) maskedImageUrla = tl.src;

4 commentaires

@vickeycolors vous devez remplacer uniquement le if. montre-moi comment tu as remplacé dans ton code. l'erreur est assez claire, vous n'avez pas défini t1.

Ici aussi, j'ai ajouté votre code, veuillez consulter le lien

@vickeycolors Vous devriez vérifier le code avant de le copier depuis Internet. Il y a une faute de frappe dans le code. Au lieu d'utiliser tl , vous avez copié t1 à partir de la réponse ci-dessus

@CerlinBoss désolé pour cela, code maintenant mis à jour, a toujours cette erreur: prnt.sc/mponlx , mais j'ai trouvé solution et je la posterai maintenant .....

0
votes

var str = 'http://sitename.com/images/oneheart.png';


var strCopy = str.substring(str.lastIndexOf('/') + 1, str.length);
console.log(strCopy);
console.log('http://sitename.com/images/' + strCopy);

4 commentaires

Merci pour la réponse, mais j'ai des milliers de fichiers json, il n'est donc pas possible de conserver le nom de l'image sous la forme oneheart.png dans chaque fichier json .....

salut, avez-vous une idée de la façon de récupérer s'il y a plusieurs images dans json? j'ai essayé ce code: codepen.io/kidsdial/pen/RdwXpZ , mais il n'en affiche qu'un image....

@vickeycolors vous devez boucler sur votre json puis passer votre valeur dans ces paramètres.

@vickeycolors me parle du modèle exact de toi json ou est-ce que ça varie?

0
votes

Vous pouvez utiliser la propriété navigator.location.origin et concater la chaîne au moment de l'exécution. Par exemple:

var maskedImageUrla = "";

    $.getJSON('test.json', function(json) {
        for (let layer of json.layers) {
            if (layer.layers && layer.layers.length > 0) {
                for (let temp of layer.layers) {
                    if (temp.src) {
                       maskedImageUrla = navigator.location.origin + '/images/' + temp.src;
                    }
                    else if (temp.layers) {
                        for (let tl of temp.layers)
                            if (tl.src) maskedImageUrla = tl.src;
                    }
                }
            }
        }

2 commentaires

salut, avez-vous une idée de la façon de récupérer s'il y a plusieurs images dans json? j'ai essayé ce code: codepen.io/kidsdial/pen/RdwXpZ , mais il n'en affiche qu'un image....

@vickeycolors Eh bien, c'est une autre question :). Veuillez publier une nouvelle question avec un exemple de ce que vous essayez d'accomplir. Avec juste cet extrait, il n'y a aucun moyen de vous indiquer une solution.

0
votes

Au lieu d'ajouter le préfixe à t1.src , j'ai ajouté le préfixe à temp.src , donc cela ne fonctionnait pas ..... La solution ci-dessous a fonctionné pour moi

var maskedImageUrla = "";

    $.getJSON('test.json', function(json) {
        for (let layer of json.layers) {
            if (layer.layers && layer.layers.length > 0) {
                for (let temp of layer.layers) {
                   if (temp.src) maskedImageUrla = temp.src;
                    else if (temp.layers) {
                        for (let tl of temp.layers)
                            if (tl.src) maskedImageUrla = 'http://sitename.com/images/' + tl.src;
                    }
                }
            }
        }

0 commentaires