Afficher des images base64 dans Power BI, au-delà de 32 766 caractères
Prise en main d'Image Plume : préparer une table d'images base64, découper les images longues, insérer le visuel, choisir taille, position et masque rond.
Read in EnglishEn bref
Une image en base64, qu'est-ce que c'est ? Une image (PNG, JPEG, SVG…) peut s'écrire comme un long texte : c'est le base64. Précédé de data:image/png;base64,, ce texte devient un data URI, que le visuel affiche sans rien télécharger. Les images voyagent ainsi dans le modèle Power BI : elles s'affichent hors ligne, dans un export PDF et dans le service, sans lien vers un site web ni droits d'accès à gérer.
Mini exemple. Le logo de 3 Ko de votre entreprise devient un texte d'environ 4 000 caractères ; une photo de 60 Ko, un texte d'environ 80 000 caractères. Power BI coupe tout texte de colonne à 32 766 caractères : la photo doit être découpée en trois morceaux, que le visuel recolle.
- Ce que fait le visuel. Image Plume affiche les images en base64 d'une colonne ou d'une mesure, une seule ou une galerie (une image par produit, par lieu, par personne), recolle les images découpées en morceaux, place et dimensionne l'image, la découpe selon une forme (coins arrondis, cercle, 153 formes ou votre SVG ★), règle l'opacité, la luminosité et le contraste, et filtre le rapport au clic.
- Quand l'utiliser. Photos de produits, logos de clients ou de magasins, portraits, pictogrammes d'état, plans, images d'avant / après travaux, diaporama d'une année à l'autre.
- Quand préférer autre chose. Une image fixe qui ne change jamais : le visuel Image natif suffit (si vous acceptez une adresse web ou un téléversement). Une icône dans une cellule de tableau : Table Plume.
- Ce que vous saurez faire. Préparer une table d'images, découper les images longues, insérer le visuel, afficher une galerie, choisir la taille et la position, arrondir l'image en cercle.
- Ce qu'il vous faut : Power BI Desktop, le visuel Image Plume installé (voir les bases communes), quelques images. Le rapport d'exemple PlumeImage-Exemple-FR, dans votre espace « Téléchargements », montre 8 lieux en galerie et à la une (page 1), un diaporama par année, des portraits ronds et des formes (page 2), et les fonctions ★ : carrousel, avant / après, feu selon un score, filtres, loupe (page 3).
Les données à fournir
La forme. Une ligne par image : une clé (le nom du produit, du lieu…), le texte de l'image en base64 et, si vous le souhaitez, une légende. Une image de plus de 32 766 caractères occupe plusieurs lignes : une par morceau, avec son numéro dans une colonne Index du morceau.
| Lieu | Index du morceau | Image | Légende |
|---|---|---|---|
| Arcachon | 1 | iVBORw0KGgoAAAANSUhEUgAA… (30 000 caractères) | Bassin et cabanes tchanquées |
| Arcachon | 2 | …suite de l'image… | Bassin et cabanes tchanquées |
| Arcachon | 3 | …fin de l'image… | Bassin et cabanes tchanquées |
| Sarlat | 1 | iVBORw0KGgoAAAANSUhEUgAA… | Cité médiévale |
| Sarlat | 2 | …fin de l'image… | Cité médiévale |
Charger un dossier d'images avec Power Query. Accueil › Obtenir des données › Dossier, choisissez le dossier de vos images, puis Transformer les données et, dans Accueil › Éditeur avancé, remplacez la requête par :
let
Source = Folder.Files("C:\Images"),
Bin = Table.AddColumn(Source, "B64", each Binary.ToText([Content], BinaryEncoding.Base64), type text),
// Morceaux de 30 000 caractères : sous la limite de 32 766 des textes de Power BI
Morceaux = Table.AddColumn(Bin, "Morceaux", each
let t = [B64], n = Number.RoundUp(Text.Length(t) / 30000)
in Table.FromColumns({ {1..n}, List.Transform({0..n - 1}, (i) => Text.Middle(t, i * 30000, 30000)) },
{ "Index du morceau", "Morceau" })),
Garder = Table.SelectColumns(Morceaux, { "Name", "Morceaux" }),
Lignes = Table.ExpandTableColumn(Garder, "Morceaux", { "Index du morceau", "Morceau" }),
Types = Table.TransformColumnTypes(Lignes, { { "Index du morceau", Int64.Type }, { "Morceau", type text } })
in
Types
Vous obtenez une table avec Name (le nom du fichier : la clé), Index du morceau et Morceau. Le base64 est « brut » (sans data:image/png;base64,) : le visuel reconnaît le type de l'image à ses premiers octets.
Pour essayer sans fichier. Modélisation › Nouvelle table, puis collez (deux pictogrammes SVG, assez courts pour tenir sur une ligne chacun) :
Pictos =
DATATABLE (
"Statut", STRING, "Image", STRING,
{
{ "OK", "data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxMDAgMTAwJz48Y2lyY2xlIGN4PSc1MCcgY3k9JzUwJyByPSc0NicgZmlsbD0nIzJFN0Q0RicvPjwvc3ZnPg==" },
{ "Alerte", "data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxMDAgMTAwJz48Y2lyY2xlIGN4PSc1MCcgY3k9JzUwJyByPSc0NicgZmlsbD0nI0MwMzkyQicvPjwvc3ZnPg==" }
}
)
Les pièges.
- Une adresse web (
https://…/logo.png) n'est jamais chargée : c'est une règle de certification de Microsoft (aucune requête réseau). Le visuel l'indique en mode édition ; convertissez l'image en base64. - Sans Index du morceau, Power BI ne garde que les 32 766 premiers caractères : l'image est coupée ou illisible.
- La colonne de l'image peut aller dans Image telle quelle (pas de somme ni de « Première » à choisir) ; une mesure qui renvoie le texte de l'image marche aussi.
- Une clé par image : sans Clé de l'image, toutes les lignes de morceaux forment une seule image.
Pas à pas : votre première galerie en 10 minutes
- Dans le volet Visualisations, cliquez sur l'icône Image Plume. Un cadre vide apparaît, avec une page d'accueil qui indique les champs à glisser.
- Glissez la colonne
Morceau(ouImage) dans Image (base64). Une première image s'affiche, peut-être coupée si elle est longue. - Glissez
Index du morceaudans Index du morceau : l'image s'affiche en entier. - Glissez
Name(ouLieu) dans Clé de l'image : le visuel affiche la première image ; c'est le mode Une image, qui suit les filtres du rapport. - Ouvrez Format › Disposition › Affichage et choisissez Grille (galerie) : une case par image, avec la clé en légende sous chaque image.
- Dans Format › Position et taille › Taille, choisissez Remplir (rogner) : toutes les cases sont pleines ; la Position choisit la partie de l'image qui reste visible.
- Dans Format › Masque (découpe), choisissez Ellipse ou cercle : chaque image devient un rond.
- Dans Format › Contour et ombre, activez Contour, réglez Épaisseur (px) = 3 et Couleur (vide = accent) = blanc : le contour suit le cercle.
- Cliquez sur une image : les autres visuels de la page se filtrent sur cette clé (filtre croisé, voir le glossaire) et les autres images s'estompent. Cliquez dans le vide du visuel pour annuler.
- Survolez une image : l'infobulle donne la clé, les champs Infobulles et les dimensions de l'image en pixels.
Résultat attendu : une galerie de vos images en ronds avec un contour, une légende sous chacune, qui filtre la page au clic, sans aucun filigrane (toutes ces fonctions sont gratuites).
En cas de problème
| Ce que vous voyez | Cause probable | Solution |
|---|---|---|
| Image coupée en bas ou pictogramme gris | Texte tronqué à 32 766 caractères | Découpez en morceaux et ajoutez Index du morceau |
| « Images intégrées seulement : les adresses web ne sont jamais chargées » | La colonne contient des adresses http(s) | Convertissez les images en base64 (Power Query ci-dessus) |
| « Image non reconnue » | Le texte n'est pas une image (espace, guillemets, autre format) | Vérifiez la colonne ; formats acceptés : PNG, JPEG, GIF, WebP, BMP, SVG |
| Une seule image au lieu d'une galerie | Mode Une image, ou pas de Clé de l'image | Format › Disposition › Affichage › Grille (galerie) et ajoutez la clé |
| Toutes les images mélangées en une | Morceaux de plusieurs images sans clé | Ajoutez la clé (nom du fichier) dans Clé de l'image |
| « Morceaux manquants pour … » en mode édition | Un numéro de morceau est absent (filtre, ligne supprimée) | Vérifiez la table : les numéros doivent se suivre |
| « +N images non affichées » | Plus d'images que Nombre maximal d'images | Augmentez le réglage (500 au plus) ou filtrez |
| Filigrane « Aperçu premium » | Une fonction ★ est utilisée sans clé | Clé dans Format › Licence Plume Studio, ou réglage gratuit |
À retenir
- Images en base64 ou data URI seulement : aucune adresse web, donc tout s'affiche hors ligne et en PDF.
- Au-delà de 32 766 caractères : une ligne par morceau et le champ Index du morceau.
- Clé de l'image = une image par valeur, filtre au clic, galerie.
- Position, taille, cercle, 22 formes, contour, opacité, luminosité, contraste, niveaux de gris : gratuits ; diaporama (axe de lecture), ombre, saturation, flou, rotation et miroirs : ★.
Pour aller plus loin
- Cas pratiques d'Image Plume : logo par défaut, diaporama, avant / après, image selon un score, et d'autres recettes.
- Champs et réglages d'Image Plume : chaque zone de champ et chaque réglage.
- Bien démarrer avec les visuels Plume : installation, licence, styles et réglages communs.
- La fiche du visuel : Image Plume. Une question : support.