web-dev-qa-db-fra.com

Liens d'image rompus URL SEF lors de la récupération des résultats de l'API

Utilisation de Joomla 3.9.8

J'utilise fetch () api afin de récupérer certaines données d'une API distante. Lorsque j'ai les résultats de l'API, je les affiche dans des éléments HTML.

L'API renvoie différentes valeurs, dont url, j'ai besoin d'insérer ce url dans une image src. C'est normalement assez facile, mais j'ai remarqué que lorsque j'essaye dans Joomla, l'image src est réécrite et préfixée avec le nom de mon site. Cela provoque des images cassées .

Afin d'insérer le code, j'utilise Sourcerer et un module html personnalisé.

J'ai créé un exemple dépouillé pour illustrer le problème. Pour cet exemple, j'utiliserai api utilisateur aléatoire , mais la logique est la même avec n'importe quelle api.

Le code que j'insère dans le module html personnalisé à l'aide de sourcerer est;

<script>
fetch("https://randomuser.me/api/")
    .then(response => response.json())
    .then(data => {
      var url = data.results[0].picture.large;
      console.log(url);
      // displays https://randomuser.me/api/portraits/men/47.jpg
      console.log('<img src=" '+url+' ">');
      // displays <img src="/example.com/ https://randomuser.me/api/portraits/men/47.jpg " >
})
</script>

Je connecte la variable url à la console et le problème est clair. L'image src est préfixée avec mon nom de domaine.

Voici un violon contenant exactement le même code, des résultats différents.

Je suis presque certain que c'est un problème avec les URL Joomla SEF parce que quand je désactive le plugin> Système - SEF tout fonctionne comme prévu .

J'ai lu un article expliquant le problème et quelques étapes de dépannage possibles comme réorganiser l'ordre des plugins, mais rien ne semble fonctionner.

J'espère que quelqu'un pourra m'aider car je suis coincé là-dessus depuis un bon moment maintenant.

joomla-3.xjavascriptcustom-componentsefrestful-api
2
jonboy

Alors ... j'ai rendu cela beaucoup trop difficile pour moi.

La réponse est que j'avais un espace dans mon code, juste après l'ouverture img src=" cela faisait que le plugin Joomla SEF préfixe l'URL de mon domaine dans l'espace.

Code d'origine;

console.log('<img src=" '+url+' ">');

Code de travail;

console.log('<img src="'+url+'">');

J'espère que cela fera économiser à quelqu'un d'autre quelques heures de travail.

1
jonboy