Aller au contenu principal

Ajouter vos propres images

Importez des images, comme un logo ou un motif de fond, pour les utiliser dans votre widget.

Importer une image​

  1. Dans le Studio de widgets, choisissez Fichier > Ressources.
  2. Faites glisser des images sur Importer des images, ou choisissez Parcourir les images. Les fichiers JPEG, PNG et BMP sont acceptés, et vous pouvez en importer plusieurs à la fois.
La boîte de dialogue Ressources, avec la zone Importer des images où déposer les fichiers, un bouton Parcourir les images et aucune image importée pour l’instantLa boîte de dialogue Ressources, avec la zone Importer des images où déposer les fichiers, un bouton Parcourir les images et aucune image importée pour l’instant

Chaque image reçoit un nom aléatoire composé de trois mots, comme happy_blue_fox. Choisissez une image sous Images importées pour voir son nom.

L’utiliser dans votre code​

Récupérez vos images par leur nom, avec useAssets :

import { useAssets } from "~lib/use-assets";

export const Widget = () => {
  const assets = useAssets();

  return (
    <img
      src={assets.happy_blue_fox}
      alt=""
      className="size-full object-contain"
    />
  );
};

Le Studio de widgets connaît le nom de vos images : il vous les propose dès que vous tapez assets..

Bon à savoir​

  • Les images n’ont pas de versions. En importer ou en supprimer une modifie immédiatement tous les cadres qui affichent votre widget, sans publication.
  • Les photos se transforment en points. L’écran est en noir et blanc : les nuances de gris deviennent donc des motifs de points. Les images simples et contrastées rendent le mieux.
  • Pour les icônes, utilisez celles de la bibliothèque. Icon dessine des milliers d’icônes qui restent nettes à toutes les tailles.