独自の画像を追加する

ロゴや背景の模様などの画像をアップロードして、ウィジェットで使えます。

画像をアップロードする

1. ウィジェットスタジオで、ファイル > アセットを選びます。
2. 画像を画像をアップロードにドラッグするか、画像を参照を選びます。JPEG、PNG、BMPファイルに対応しており、複数の画像を一度にアップロードできます。

各画像には、happy_blue_foxのように3つの単語を組み合わせたランダムな名前が付きます。アップロード済みの画像で画像を選ぶと、その名前を確認できます。

コードで使う

画像は、名前を指定して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"
    />
  );
};

ウィジェットスタジオは画像の名前を把握しているので、assets.と入力すると名前の候補が表示されます。

知っておきたいこと

• 画像はバージョン管理されません。画像をアップロードしたり削除したりすると、公開しなくても、そのウィジェットを表示しているすべてのフレームにすぐ反映されます。
• 写真は点の集まりになります。画面は白黒なので、グレーの濃淡は点の模様で表されます。シンプルでコントラストの高い画像がきれいに表示されます。
• アイコンにはライブラリのアイコンを使いましょう。Iconは、どのサイズでもくっきり表示される数千種類のアイコンを描けます。