Zum Hauptinhalt springen

Eigene Bilder hinzufügen

Laden Sie Bilder hoch, etwa ein Logo oder ein Hintergrundmuster, um sie in Ihrem Widget zu verwenden.

Ein Bild hochladen​

  1. Wählen Sie im Widget-Studio Datei > Ressourcen.
  2. Ziehen Sie Bilder auf Bilder hochladen, oder wählen Sie Bild auswählen. JPEG-, PNG- und BMP-Dateien funktionieren, und Sie können mehrere auf einmal hochladen.
Der Dialog Ressourcen mit dem Feld Bilder hochladen, auf das Sie Bilder ziehen, und der Schaltfläche Bild auswählen, noch ohne hochgeladene BilderDer Dialog Ressourcen mit dem Feld Bilder hochladen, auf das Sie Bilder ziehen, und der Schaltfläche Bild auswählen, noch ohne hochgeladene Bilder

Jedes Bild bekommt einen zufälligen Namen aus drei Wörtern, etwa happy_blue_fox. Wählen Sie unter Hochgeladene Bilder ein Bild aus, um seinen Namen zu sehen.

Im Code verwenden​

Holen Sie Ihre Bilder über ihren Namen aus 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"
    />
  );
};

Das Widget-Studio kennt die Namen Ihrer Bilder. Wenn Sie assets. tippen, listet es sie auf.

Gut zu wissen​

  • Bilder werden nicht versioniert. Wenn Sie ein Bild hochladen oder löschen, ändert sich sofort jeder Rahmen, der Ihr Widget zeigt, ganz ohne Veröffentlichen.
  • Fotos werden zu Punkten. Der Bildschirm ist schwarz-weiß, deshalb werden Grautöne zu Punktmustern. Einfache, kontrastreiche Bilder sehen am besten aus.
  • Nehmen Sie für Symbole die Symbole der Bibliothek. Icon zeichnet Tausende Symbole, die in jeder Größe scharf bleiben.