Как изображения могут быть использованы в угловом элементе

Я создаю угловой элемент, который должен быть встроен в несколько внешних сайтов.

Процесс встраивания будет просто ссылкой на скомпилированный скрипт и элементом DOM, представляющим элемент:

<html>
   <head>
      <script src="element.js"></script>
   </head> 
   <body>
      <element></element>
   </body>
</html>

Но проблема в том, что элемент использует несколько ресурсов в форматах.png,.svg,.gif и.jpg.

И, конечно, скомпилированный элемент, используемый на другом сайте, не может ссылаться на эти ресурсы.

Документация для угловых элементов очень ограничена, и даже Angular Docs ничего об этом не говорит.

Какой самый оптимальный способ достичь этого? Я видел некоторых людей, которые преобразовывали ресурсы в данные и отображали их таким образом.

Источник

1 ответ

Решение

Лучший способ создать полностью автономный компонент - встраивать изображения в компонент с использованием URI DATA.

Вместо этого:

<img src="http://www.example.com/image.jpg"/>

Вы должны закодировать файл изображения в текстовый формат, например Base64, а затем использовать эти текстовые данные в src атрибут:

<img src="data:image/png;base64,your-base-64-encoded-image-data" />

Более подробная информация здесь: https://www.thesitewizard.com/html-tutorial/embed-images-with-data-urls.shtml

Это увеличивает размер вашего компонента, но он самодостаточен и будет переносимым на другие приложения без необходимости включать изображение в отдельный файл.

Файлы SVG уже являются текстовыми, но они основаны на XML, поэтому вам нужно только кодировать файл по URL, а не Base64. Это производит намного меньший кусок данных.

Вы можете запустить команду Base64 на компьютере *nix:

base64 -i "myimage.jpg"

или же:

base64 -i "myimage.jpg" -o "base64.txt"

Или используйте онлайн-конвертер:

Источник
Другие вопросы по тегам