1

次のようなsvg画像を使用するこのstenciljsコンポーネントがあります。

...
return (
  <button>
    <img src="../../assets/icon.svg"/>
    <slot/>
  </button>
);
...

私のフォルダ構造は

src/
    assets/
           icon.svg
    components/
              button/
                     button.tsx

今、私が行うと、すべてが含まれるフォルダーがstencil build作成されます。dist

次の構造を持つ dist フォルダーをサイトにコピーします。

my-web/
       index.html
       bundle/
              <content from dist>

そして index.html 内にバンドルをロードします

<script src="/bundle/my-componets.js"></script>

/assets/icon.svgこれは期待どおりに機能しますが、存在しないアセットが読み込まれます (404)。これを修正するために何をする必要があるか提案はありますか?

4

2 に答える 2

2

これを行うには2つの方法があると思います。

最初: https://stenciljs.com/docs/config#copyを見てください。この構成設定を使用して、アセット (.svg ファイルなど) を dist フォルダーにコピーできます。次のように、ファイルのコピー先を指定することもできます。

copy: [
    { src: "../path/to/the/files", dest: "./path/to/paste/the/files" }
  ],

2 番目: コンポーネントの JS にアセットをインポートします。インポートを処理するには、ロールアップ プラグインが必要です (例: rollup-plugin-svg-to-jsx - しかし他にもあります)。このプラグインを設定したら、次のことができます。

import * as Icon from "path/to/your/svg"

...

return (
  <button>
    <Icon />
    <slot />
  </button>
);

最初のものは、JS バンドルを少し小さく保ち、ページのどこかにボタンを配置したときに Icon.svg ファイルをロードします。2 つ目は svg を JS にバンドルし、JS と一緒にロードするため、常にアイコンのないボタンはありません。

于 2019-02-19T07:55:10.970 に答える