impossible d'accéder à un blob avec jquery [Résolu]

[thor76160]

Bonjour.
Depuis quelques temps, je fais tourner mon site hébergé sur windows azure. J'utilise le plugin jquery "colorbox" pour me faire une gallerie d'images bien sympa. Seulement voilà, mes image sont stockées en blob sur mon serveur et ... ça plante lorsque je clique sur la miniature :/

voici un extrait de mon erreur sous chrome :

Origin http://mon_site.cloudapp.net is not allowed by Access-Control-Allow-Origin.

comment puis-je autoriser mon conteneur de blob à accepter le chargement d'image en ajax ?

Merci d'avance pour vos propositions.

[tomlev]

C'est pour des raisons de sécurité, normalement tu ne peux pas faire de requête AJAX vers un autre domaine. Cherche "jquery cross domain" sur Google, ça devrait t'indiquer la solution...

[thor76160]

le défaut ne vient donc pas de Azure ?
dans ce cas j'ai créé la fonction suivante :

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
28
PictureBlob _pictureBlob = new PictureBlob();
 
public Bitmap LoadPicture(string id, string containerName)
        {
            string url = string.Empty;
 
            switch (containerName)
            {
                case "Avatar":
                    url = _pictureBlob.ContainerAvatar.GetBlobReference(id).Uri.ToString();
                break;
 
                case "Large":
                    url = _pictureBlob.ContainerLargeImage.GetBlobReference(id).Uri.ToString();
                break;
 
                case "Mini":
                    url = _pictureBlob.ContainerMiniImage.GetBlobReference(id).Uri.ToString();
                break;
            }
 
            /*WebClient webclient = new WebClient();
            byte[] bmpBytes = webclient.DownloadData(url);
            Response.ContentType = "image/jpg";
            Response.BinaryWrite(bmpBytes);*/
 
            return new Bitmap(url);
        }

voilà le lien de la galerie d'images :

Code :

<a class="articlePictures" href="/Portfolio/LoadPicture/e95d5bb5-eff4-40b5-8484-ce9dd07cbc5e?containerName=Large"><img alt="" src="https://storagemaxime.blob.core.windows.net/mini/e95d5bb5-eff4-40b5-8484-ce9dd07cbc5e" /></a>

lorsque je copie et colle le lien dans le navigateur, j'obtiens bien mon image.
mais si je clique sur le lien et que c'est le plugin jquery qui charge l'image, j'obtiens pleins de caractères spéciaux...

que dois-je faire ? :/

[tomlev]

Envoyé par thor76160

le défaut ne vient donc pas de Azure ?

A priori non, ce serait pareil avec n'importe quel site autre que celui où ta page est hébergée.

Envoyé par thor76160

lorsque je copie et colle le lien dans le navigateur, j'obtiens bien mon image.
mais si je clique sur le lien et que c'est le plugin jquery qui charge l'image, j'obtiens pleins de caractères spéciaux...

que dois-je faire ? :/

Etant donné que j'ai pas vu ton code jQuery, et que d'ailleurs je ne suis pas du tout expert en jQuery... aucune idée

Eventuellement tu peux faire un HttpHandler qui va chercher le blob et l'envoie au client...

[thor76160]

voici mon code jQuery :

Code :

$(".articlePictures").colorbox({rel:"Gallerie d'images"});

mon code html :

Code :

1
2
3
4
5
<ul id="gallery">
                <li><a class="articlePictures" href="http://ma-grande-image"><img src="http://ma-petite-image" alt="" /></a></li>
                <li><a class="articlePictures" href="http://ma-grande-image"><img src="http://ma-petite-image" alt="" /></a></li>
                <li><a class="articlePictures" href="http://ma-grande-image"><img src="http://ma-petite-image" alt="" /></a></li>
            </ul>

au passage, voila l'adresse où vous pouvez télécharger le plugin : http://jacklmoore.com/colorbox/

[thor76160]

alors je suis désolé, mais là je ne comprends plus rien !

on me dit que je ne peux pas accéder à mon image car il s'agit d'un domaine différent...
j'ai mis la ligne suivante en dure dans mon programme :

Code :

<li><a class="articlePictures" href="http://willouastro.w.i.pic.centerblog.net/o/df78b657.jpg"><img src="@picture.UrlMini" alt="" /></a></li>

résultat, je peux ouvrir correctement cette image :


le problème est donc bien du coté d'azure !

voici une url pour l'une de mes images : https://storagemaxime.blob.core.wind...6-0ea3684507be

le problème viendrait-il que c'est un https ??

Edit
je ne trouve toujours aucune info sur le net, auriez-vous une piste ?
bouhaaaa, je tourne en rond.

[thor76160]

youhouu j'ai trouvé !

la faute au plugin. j'ai trouvé cette fonction dans le code jquery :

Code :

1
2
3
function isImage(url) {
		return settings.photo || /\.(gif|png|jpe?g|bmp|ico)((#|\?).*)?$/i.test(url);
	}

étant une image blob, elle n'a pas d'extension ! donc ça plante. la solution ? le plugin colorbox contient un paramètre "photo" qu'il faut valoriser à True pour que ça marche, que mon image soit reconnu sans vérification de l'url.

voilà

[tomlev]

Bien vu
N'oublie pas le bouton