イメージ・ギャラリの操作
イメージ・ギャラリを使用して、イメージ・リソースをアプリケーションにインポートしたり、イメージ・コンポーネントで参照されるイメージ・リソースを選択します。 キャンバスでイメージ・コンポーネントを選択すると、プロパティ・ペインのデータ・タブからイメージ・ギャラリが開きます。
アプリケーション内のイメージは、アプリケーション内のいずれかのresourcesフォルダにあるimagesフォルダに格納されます。 アプリケーションが作成されると、デフォルトでアプリケーション内のリソースのフォルダが作成されます。 アプリケーションのresourcesフォルダのイメージは、アプリケーションの任意のページで使用できます。 アプリケーションのデフォルトのresourcesフォルダに加えて、アプリケーションの各フローには、フローのページで使用されるリソース用のresourcesフォルダがある場合があります。
イメージ・ギャラリを使用して、アプリケーション内のイメージを表示および管理できます。 イメージ・ギャラリには、アプリケーションのimagesフォルダおよび現在のフローに格納されているイメージのみが表示されます。 イメージ・ギャラリでは、他のロケーションに格納されているイメージは表示されません。
「イメージ・ギャラリ」を使用して、次のタスクを実行できます:
-
イメージをインポートします。 現在のフローまたはアプリケーションのリソースとしてイメージを追加できます。
-
イメージ・コンポーネントによって表示されるイメージを選択します。 アプリケーションまたは現在のフローの
imagesフォルダに格納されているイメージを選択できます。 イメージを選択すると、イメージへのパス(たとえば、{{ $flow.path + 'resources/images/myimage.png' }})がプロパティ・ペインのコンポーネントの「ソースURL」フィールドに入力されます。
イメージ・ギャラリにイメージをインポートするには:
- プロパティ・ペインで「データ」タブを開き、イメージ・ギャラリ・アイコン(
)をクリックします。キャンバスでイメージ・コンポーネントを選択すると、プロパティ・ペインのデータ・タブに、格納されているイメージへのパスの「ソースURL」フィールドが表示されます。 イメージが定義されていない場合、このフィールドは空です。
「図page-designer-inspector-newimage.pngの説明」アプリケーションの
imagesフォルダにイメージを追加するには、イメージ・ギャラリを開く必要があります。 データ・タブのドロップ・ターゲット領域にイメージをドラッグすると、「イメージ・ギャラリ」内のフローにイメージが追加され、イメージへのパスがソースURLフィールドに自動的に入力されますが、「イメージ・ギャラリ」ダイアログ・ボックスは開きません。 - イメージ・ギャラリのイメージ・パネルで「アプリケーション」を選択します。
また、イメージ・ギャラリでフローを選択して、フローの
imagesフォルダにイメージをインポートすることもできます。 フォルダが存在しない場合は自動的に作成されます。
「図page-designer-imagegallery.pngの説明」イメージ・ギャラリの「イメージ」パネルには、アプリケーション内および現在のフロー内のページで使用可能なイメージのリストが表示されます。 アプリケーション・セクションでは、Visual BuilderがwebアプリケーションおよびプログレッシブWebアプリケーションに使用する2つのイメージも表示されます。 独自のイメージを使用する場合は、これらを上書きします。 イメージ・パネルでイメージを選択して、イメージをプレビューできます。 イメージ・パネルでイメージを選択して選択をクリックすると、イメージへのパスがデータ・タブのイメージ・コンポーネントのソースURLに入力されます。