Pourquoi la exemple suivant affiche l'image dans Firefox 4, mais pas dans Chrome 10 et Internet Explorer 8 ?
HTML :
<div style="background-image: url('http://www.mypicx.com/uploadimg/1312875436_05012011_2.png')"></div>CSS :
div {
width: 60px;
height: 60px;
border: 1px solid black;
}Des idées de solutions ?
Les apostrophes ne font aucune différence ici. Un autre problème est en jeu. Probablement la réponse de @lpd (pas de hotlinking autorisé ?). La seule raison pour laquelle la démo dans votre réponse fonctionne est qu'elle utilise http://i54.tinypic.com/4zuxif.jpg à la place de l'ancien http://www.mypicx.com/uploadimg/1312875436_05012011_2.png .
C'est étrange... La spécification W3 les indique comme optionnels, et obligatoires dans les cas où l'url contient certains caractères. w3.org/TR/CSS21/syndata.html#uri
Cela a résolu le problème pour moi aussi... lorsque j'ai défini le style en ligne. Cela fonctionne bien avec ' dans un fichier .css. background-image : url(Img/load.gif) ; si ce n'est pas une raison valable, j'aimerais en savoir plus de la part des experts.
Cela fonctionne dans mon navigateur google chrome version 11.0.696.60
J'ai créé une page simple sans autre élément que des balises de base et sans fichier CSS séparé et j'ai obtenu une image
Voici ce que j'ai mis en place :
<div id="placeholder" style="width: 60px; height: 60px; border: 1px solid black; background-image: url('http://www.mypicx.com/uploadimg/1312875436_05012011_2.png')"></div>J'ai mis un identifiant juste au cas où il y aurait une balise id cachée et cela fonctionne.
Chrome 11 affiche ce qui suit dans son débogueur :
[Erreur] GET http://www.mypicx.com/images/logo.jpg non défini (non défini)
Il semble que ce service d'hébergement utilise un système dynamique bizarre qui empêche ces navigateurs de le récupérer correctement. (Au lieu de cela, il essaie de récupérer l'image de base par défaut, qui est problématiquement un jpeg). Pourriez-vous simplement télécharger une autre copie de l'image ailleurs ? Je pense que c'est la solution la plus simple, et de loin.
Edit : Voyez ce qui se passe dans Chrome lorsque vous placez l'image en utilisant normal <img> tags ;)
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
0 votes
L'exemple ne fonctionne pas non plus dans Chrome 12.0.712.0
9 votes
Au cas où :
url(http://www.mypicx.com/uploadimg/1312875436_05012011_2.png)Note : pas d'apostrophes -url()n'en a pas besoin.1 votes
Génial :) J'ai enlevé les apostrophes et cela a résolu le problème !