[AJAX] Passer une image par AJAX

Bonjour, je suis confronté à un petit soucis

Je cherche à faire passer une image (.gif) par AJAX.

En gros je veux que le XhrObj.responseText renvoie une image lue via PHP.

Mon code est le suivant

Fichier JS

Code:

---

1 2 3 4 5 6 7 8 9 10

XhrObj.open("GET", "script.php");   XhrObj.onreadystatechange = function() { if (XhrObj.readyState == 4 && XhrObj.status == 200) { content.innerHTML = XhrObj.responseText ; } }   XhrObj.setRequestHeader("Content-Type", "image/gif"); XhrObj.send(null);

---

script.php

Code:

---

1 2 3 4 5 6

<?php $url="http://www.sitedistant/image.gif"; header('Content-type: image/gif'); readfile($url); exit; ?>

---

Malheureusement en retour j'ai le code brut de l'image

Code:

---

GIF89a .....

---

alors qu'en appelant directement script.php ça marche.

J'ai pourtant essayé de déclarer le bon header dans lors de l'appel, je me mélange les pinceaux qq part ?

Une idée ?

Merci

Pourquoi as-tu besoin d'AJAX pour afficher une image ? :koi:

Code:

---

content.innerHTML = '<img src="http://www.sitedistant/image.gif" alt="Imge" />

---

est largement suffisant.

Au pire, si la requête est destinée à te renvoyer l'URL de l'image, fais juste un echo de cette URL et au retour de ta requête, utilise cette donnée pour écrire ta balise.

En tout état de cause, la seule façon d'afficher une image, c'est d'utiliser la balise idoine...

Même question que Bovino par curiosité. Et s'il ne s'agit que d'afficher l'image sa réponse est la meilleure. Toutefois, une alternative est de :

préfixer le flux encodé en base64 de 'data:image/gif;base64,' et le mettre dans l'attribut src d'une balise IMG.

Soit: dans le php, générer le préfixe puis ajouter le retour de readfile() encodé en base64

XhrObj.responseText devrait donc contenir

Code:

---

data:image/gif;base64,<flux encodé base64>

---

et pour l'afficher

Code:

---

img.src = XhrObj.responseText

---

Merci pour vos réponses. L'image en question, chose curieuse, n'est pas affichée par le navigateur quand on demande de charger son URL : il propose de la télécharger....

Ca passe par contre avec vos deux méthodes, donc c'est plus nécessaire de passer l'image dans le flux, j'ai fait un mix en passant par

Code:

---

img.src = XhrObj.responseText

---

, où XhrObj.responseText contient simplement l'URL récupérée par AJAX.

Merci !:ccool: