Aggiungere le proprie immagini

Carica immagini, come un logo o un motivo di sfondo, da usare nel tuo widget.

Caricare un’immagine

1. Nello Studio dei widget, scegli File > Risorse.
2. Trascina le immagini su Carica immagini, oppure scegli Sfoglia immagini. Funzionano i file JPEG, PNG e BMP, e puoi caricarne diversi alla volta.

Ogni immagine riceve un nome casuale composto da tre parole, come happy_blue_fox. Scegli un’immagine in Immagini caricate per vederne il nome.

Usarla nel codice

Prendi le tue immagini da useAssets, per nome:

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"
    />
  );
};

Lo Studio dei widget conosce i nomi delle tue immagini, quindi quando digiti assets. te li elenca.

Cose da sapere

• Le immagini non hanno versioni. Caricarne o eliminarne una cambia subito ogni cornice che mostra il tuo widget, senza bisogno di pubblicare.
• Le foto diventano puntini. Lo schermo è in bianco e nero, quindi le sfumature di grigio diventano motivi di puntini. Le immagini semplici e ad alto contrasto rendono meglio.
• Per le icone, usa quelle della libreria. Icon disegna migliaia di icone che restano nitide a qualsiasi dimensione.