Saltar al contenido principal

Añadir tus propias imágenes

Sube imágenes, como un logotipo o un patrón de fondo, para usarlas en tu widget.

Subir una imagen​

  1. En el Estudio de widgets, elige Archivo > Recursos.
  2. Arrastra imágenes a Subir imágenes o elige Buscar una imagen. Admite archivos JPEG, PNG y BMP, y puedes subir varios a la vez.
El cuadro de diálogo Recursos, con la zona Subir imágenes a la que arrastrar archivos, un botón Buscar una imagen y todavía ninguna imagen subidaEl cuadro de diálogo Recursos, con la zona Subir imágenes a la que arrastrar archivos, un botón Buscar una imagen y todavía ninguna imagen subida

Cada imagen recibe un nombre aleatorio formado por tres palabras, como happy_blue_fox. Elige una imagen en Imágenes subidas para ver su nombre.

Usarla en tu código​

Obtén tus imágenes de useAssets, por su nombre:

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

El Estudio de widgets conoce los nombres de tus imágenes, así que al escribir assets. te los muestra en una lista.

Lo que debes saber​

  • Las imágenes no tienen versiones. Subir o eliminar una cambia al momento todos los marcos que muestran tu widget, sin publicar nada.
  • Las fotos se convierten en puntos. La pantalla es en blanco y negro, así que los tonos de gris se convierten en patrones de puntos. Las imágenes sencillas y de alto contraste son las que mejor quedan.
  • Para los iconos, usa los de la biblioteca. Icon dibuja miles de iconos que se ven nítidos a cualquier tamaño.