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

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

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

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

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

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

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

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

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

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

1 Ответ

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

Лучший способ создать полностью автономный компонент - встраивать изображения в компонент с использованием 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"

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

...