See how Stencil fits into the entire Ionic Ecosystem ->
Stencil is part of the Ionic Ecosystem ->

ローカルアセット

コンポーネントには通常、画像、ビデオ、またはあらゆる種類のデータファイルなどのアセットが必要です。Stencilには、このタスクを簡単にするための特定の機能が含まれています。

コンポーネントのassetsDirs

ローカルアセットの使用方法の例を詳しく見てみましょう。

以下は、コンポーネント、スタイルシート、およびアセットディレクトリを含むコンポーネントのフォルダ構造の例です。

src/
  components/
    stencil-asset/
      assets/
        sunset.jpg
        beach.jpg
      stencil-asset.css
      stencil-asset.tsx

以下は、 srcと呼ばれるプロパティに基づいてアセットを正しくロードするstencil-asset.tsxファイルです。

import { Component, Prop, getAssetPath, h } from '@stencil/core';

@Component({
  tag: 'stencil-asset',
  styleUrl: 'stencil-asset.css',
  assetsDirs: ['assets']
})
export class StencilAsset {

  @Prop() image = "sunset.jpg";

  render() {
   return <img src={getAssetPath(`./assets/${this.image}`)} />
  }
}

この例からわかるように、コンポーネントデコレータには ./assetsフォルダを指すassetsDirsプロパティがあり、これはStencilコンパイラにそのフォルダを配布フォルダ( distまたはwww)にコピーするように指示します。

次に、コンポーネントのロジック内で、 getAssetPath関数(@stencil/coreからインポート)を使用して、アセットのロード元となる絶対パスを決定します。

ユースケース

私たちが思いついたいくつかのユースケースは次のとおりです。

  • SVGのコレクションからの読み込み
  • オンデマンドでフォントを読み込んで適用する
  • 画像またはビデオの読み込み
BackNext
Contributors