J'ai du mal à afficher une image Base64 en ligne.
Comment puis-je le faire ?
<!DOCTYPE html>
<html>
<head>
<title>Display Image</title>
</head>
<body>
<img style='display:block; width:100px;height:100px;' id='base64image'
src='data:image/jpeg;base64, LzlqLzRBQ... <!-- Base64 data -->' />
</body>
</html>Mon suspect est bien sûr les données Base64 réelles. Sinon, tout me semble correct. Voir ce violon où un schéma similaire fonctionne. Vous pouvez essayer de spécifier le jeu de caractères.
<div>
<p>Taken from wikpedia</p>
<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
</div>Vous pouvez essayer ce décodeur Base64 pour voir si vos données Base64 sont correctes ou non.
Merci d'avoir pris le temps de répondre à ma question... ce js fiddle sort simplement un point rouge ? c'est ce qu'il est censé faire ?
@Christopher, oui - c'est un URI de données pour une image de point rouge (source : fr.wikipedia.org/wiki/Data_URI_scheme ). Je signale simplement qu'il n'y a pas de problème apparent dans ce que vous faites, sauf peut-être les données base64 réelles. Utilisez le décodeur donné et enregistrez les données binaires décodées comme un fichier jpeg et essayez de l'ouvrir. Si cela ne fonctionne pas, il y a un problème dans votre encodage base64.
Je pense avoir découvert le problème : lorsque le fichier base64 est téléchargé, tous les "+" semblent être supprimés. Ce qui annule en interne le jpeg. J'envoie l'image depuis un appareil vers le serveur avec AJAX. Est-il possible que le "+" ne soit pas transmis correctement parce qu'il s'agit d'une entité html ?
Vous devez spécifier le bon Type de contenu , Content-encoding y jeu de caractères .
Comme
data:image/jpeg;charset=utf-8;base64,conformément à la syntaxe de la schéma URI de données :
data:[<media type>][;charset=<character set>][;base64],<data>
stackoverflow.com/questions/13265902/ suggère qu'il n'y a pas d'en-tête pour coder le corps HTTP en utilisant la base-64.
Aussi, stackoverflow.com/questions/7285372/ - c'est un en-tête MIME, pas un en-tête HTTP. Pouvez-vous nous expliquer comment le codage du contenu doit être spécifié ?
Cela a résolu le problème pour moi. Chrome supposait l'UTF-8 et affichait les images, tandis que Microsoft Edge ne parvenait pas à effectuer le rendu. Une fois que j'ai inclus le jeu de caractères, les images s'affichent parfaitement.
Si vous avez PHP en back-end, vous pouvez utiliser ce code :
$image = 'http://images.itracki.com/2011/06/favicon.png';
// Read image path, convert to base64 encoding
$imageData = base64_encode(file_get_contents($image));
// Format the image SRC: data:{mime};base64,{data};
$src = 'data: ' . mime_content_type($image) . ';base64,' . $imageData;
// Echo out a sample image
echo '<img src="' . $src . '">';
Vous pouvez placer vos données directement dans un url déclaration, comme :
src = 'url(imageData)';Et pour obtenir les données de l'image, vous pouvez utiliser la fonction PHP :
$imageContent = file_get_contents("imageDir/" . $imgName);
$imageData = base64_encode($imageContent);Ainsi, vous pouvez copier-coller la valeur de imageData et la coller directement dans votre URL et l'affecter à l'attribut src de votre image.
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.
2 votes
developer.mozilla.org/fr/US/docs/Web/HTTP/Basics_of_HTTP/
1 votes
L'extension de l'image est-elle importante dans le src
5 votes
À tous ceux qui lisent cette question et ses réponses... demandez-vous si vous avez réellement besoin de l'encodage base64 ou non. Les navigateurs modernes n'en ont pratiquement jamais besoin. Si vous utilisez l'encodage base64, vous ajoutez 33 % de frais généraux à la taille de l'image, des exigences supplémentaires en termes de CPU et de mémoire lors de l'encodage et du décodage, vous encombrez le DOM avec des données supplémentaires qui n'ont pas besoin d'être là, et vous imposez des limites strictes et incohérentes sur les tailles et les types de ressources. Utilisez plutôt des blobs, des URL d'objets, etc.
3 votes
@Brad parfois, lorsque vous avez besoin que les choses soient autonomes, Base64 est la seule option. En fait, je suis tombé sur cette page en essayant d'écrire un script pour extraire des images d'un carnet Jupyter (qui les enregistre en PNG Base64) dans un fichier HTML à publier comme rapport.
0 votes
@vikarjramun On dirait que vous avez littéralement le seul cas que j'ai lu sur Stack Overflow depuis plusieurs années, où vous avez un cas d'utilisation légitime. Dans ce cas, oui, par tous les moyens, utilisez ce dont vous avez besoin :-)
2 votes
@Brad il y a certainement une meilleure façon de faire ce que je fais, mais je suis paresseux et je ne me soucie pas de la présentation maintenant puisque c'est juste pour envoyer à mes collègues pour discuter. De plus, qui n'aime pas écrire des shells complexes en une ligne pour accomplir ses tâches :)
0 votes
Les images codées en base 64 sont souvent utilisées lorsque le webmestre tente d'empêcher le téléchargement d'images. Certains JS en fonction de la position du curseur par exemple, génèrent une url vers une partie d'une image, ou une image complète encodée en BASE64, et donc pas mise en cache comme une image, ou listée comme un objet image de la page. Soit, il ne peut pas être lu sans maître script le tirant comme un objet image. J'ai maintenant un tel site Web devant moi et je n'ai pas la moindre idée de la façon dont je peux extraire ces images. Je peux les voir même dans le débogueur Mozilla, téléchargées sur l'événement jQuery, et changeant de contenu chaque fois que je déplace la souris.
0 votes
@Brad Un autre cas où l'on a besoin de base64 est l'utilisation d'une sorte de téléchargeur/sélecteur d'images du côté client, où l'utilisateur choisit une image depuis son appareil et où nous voulons la voir à l'écran immédiatement. Le seul endroit où elle existe à ce moment-là est dans le navigateur, donc, pour autant que je sache, base64 est la solution.
1 votes
@StuartAitken Non, c'est manifestement incorrect. Nous avons des URL d'objets depuis près de dix ans. developer.mozilla.org/fr/US/docs/Web/API/URL/createObjectURL Veuillez vous renseigner à ce sujet, et retournez voir tous ceux qui vous ont dit qu'il s'agissait d'une utilisation appropriée de la base64 et répandez la bonne nouvelle que la base64 n'est pas nécessaire pour ce cas d'utilisation.
0 votes
@Brad Haha, c'est excellent, merci. Je dois dire que c'est une petite fonctionnalité étonnamment cachée. C'est vraiment la première fois que je la vois.
0 votes
Il y a beaucoup plus que quelques cas d'utilisation de base64 et dire aux gens d'éviter base64 au lieu de leur apprendre les méthodes appropriées me semble un énorme échec. base64 est parfaitement bien sauf qu'il ne peut pas être mis en cache s'il est utilisé en ligne, donc essayez plutôt de garder son utilisation à l'intérieur des fichiers css afin que le fichier css soit mis en cache contenant la base 64. C'est également utile lorsque vous avez des politiques CORS qui utilisent des en-têtes personnalisés avec des appels entre serveurs, pour simplement renvoyer à quelqu'un une base64 plutôt qu'une url vers une image à laquelle il ne peut pas accéder à moins qu'il ne définisse des en-têtes... c'est-à-dire un simple `<img src=" url/path "> ne marchera jamais.
0 votes
En HTML, les guillemets à utiliser sont "" et non ''.