Изображение не найдено при использовании пакета stenciljs - PullRequest
Новая
       35

Изображение не найдено при использовании пакета stenciljs

0 голосов
/ 20 ноября 2018

У меня есть этот компонент stenciljs, который использует изображения svg, такие как: 

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

Моя структура папок 

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

Теперь, когда я делаю stencil build, он создает *Папка 1008 * со всем в ней.

Я копирую папку dist на свой сайт, который имеет следующую структуру: 

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

И внутри index.html я загружаю пакет 

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

Это работает как ожидалось, но актив загружен из /assets/icon.svg, который не существует (404).Любые предложения, что мне нужно сделать, чтобы это исправить?

Ответы [ 2 ]

0 голосов
/ 19 февраля 2019

Думаю, есть два способа сделать это.

Первый: взгляните на https://stenciljs.com/docs/config#copy. Используя этот параметр конфигурации, вы можете скопировать свои активы (файлы .svg и все остальное) в свой дистрибутив.папка.Вы также можете указать место назначения для файлов, которые будут скопированы, например: 

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

Секунда: Импортируйте актив в JS вашего компонента.Вам понадобится плагин Rollup для обработки импорта (например: rollup-plugin-svg-to-jsx - но есть и другие).После настройки этого плагина вы можете просто сделать: 

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

...

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

Первый будет держать ваш JS-пакет немного меньше и загружать файл Icon.svg, когда вы размещаете кнопку где-то на странице.Второй будет связывать svg в ваш JS и загружать вместе с вашим JS - так что в любое время нет кнопки без значка.

0 голосов
/ 20 ноября 2018

Из того, что вы намереваетесь сделать, я понимаю, что ваша цель - создать полностью работоспособное автономное приложение внутри ./dist после сборки. Все исходные файлы, необходимые для запуска приложения, должны быть там размещены.

Это означает, что вам нужно будет создать копию исходных файлов (статических файлов) в папке распространения способом my-web/assets/icon.svg, чтобы приложение могло найти и получить к нему доступ.

...