Доступ к изображениям в библиотеке компонентов

Question

У меня есть библиотека компонентов Angular 7, и я пытаюсь добавить несколько изображений для кнопок и т. П.

Структура моего проекта выглядит так

projects
 components
   src
     lib
       myComponent
         assets
            images
               image.png 

Компонент, в котором я пытаюсь использовать изображение, находится на том же уровне, что и папка «оценки».

Например, я добавил эту кнопку

<p>
<button (click)="activateSelect()"><i 
src="../../assets/images/tempImage.png"></i></button>  
</p>

... но когда я собираю и использую инструменты разработчика в Chrome, чтобы посмотреть на кнопку, путь к изображению http://localhost/assets/images/tempImage.png

Похоже, что маршрутизация не работает правильно для этого?

Я пробовал относительные пути, "./", просто вставил путь, и ничего не работает. Это кажется сложнее, чем должно быть, поэтому я уверен, что не понимаю, как это работает.

Любая помощь очень ценится.

UPDATE У меня никогда не было изображения для работы с кнопкой, но я заменил тег "button" на тег "img" и заставил его работать так ...

<img style="background-color: aliceblue;width:35px;height:35px" 
(click)="activateSelect()" src="assets/tempSelect.png">

ОБНОВЛЕНИЕ 2 Вышеописанное работает, если вы хотите, чтобы изображения находились в папке «assets» вашего приложения. Я создаю библиотеку компонентов, для которой мне нужно, чтобы мои ресурсы использовались ... Есть ли способ создать папку с активами в библиотеке компонентов, которую можно создавать и предоставлять с помощью библиотеки компонентов?

ОБНОВЛЕНИЕ 3 Чтобы получить ваши изображения в вашей библиотеке компонентов, чтобы все было автономно, вам нужно будет использовать инструмент для кодирования ваших изображений. Я использовал https://base64.guru/converter/encode/image Однажды в инструменте выберите свое изображение и затем выберите «Формат вывода» Я использовал «Data URI - data: content / type; base64» Затем нажмите кнопку «Кодировать изображение в базу 64» Это выведет строку вроде этого

* * 1 035 данные: изображения / PNG; base64, iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsSAAALEgHS3X78AAABTElEQVRIie2WwY2DMBBFX1YpICVQQkpwCSmBk + dKCSmB69wogRIowSW4BDpgDx4kFIEwISG7Ur7kAxqL5 + / 5BP + GYeAT + vkI9Qv + s2ARqQ8Hi4gDylfBtzgugBpwIlIeDQ6AA + 4icj0K7ICgqj1QAo2IXI4AF6oaAVS1AxobbwfH6YOq1kAvIve3gS3RcaZUATervx4MXOfAD / 0u3gEugG6uoKqB5LzdErZdjifwFmhJ5zxPwzCsDu99zJzXee / LnLnntYXZ9i26FZHG6sEc1yISrAWLWgWTtjlMFlEDlQUL0oelsnmFLaIihW43ONqRaYDeYK3VO6BX1XvGuzaDLyQHN5KrR7BjIfVLykl1gbm0vo2gUY / PecpJ4Ex6g / ф + sjX103F65nprl4FIaoGzXXHjTyRHOT2eU0NKbgeUW4CjnnL8Cv2PW + YXvEe / 8QAaBBU + rp8AAAAASUVORK5CYII =

Как вы можете видеть выше, это изображение "png", убедитесь, что это свойство соответствует типу изображения, которое вы используете.

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

 [src]="YourImageVariable"

Это не будет работать с кнопкой, поскольку [src] не является известным свойством кнопки, но может использоваться с

Answer 1

Поскольку компонент библиотеки не имеет корня проекта, поэтому он всегда выбирает ресурсы из корня основного проекта, то есть из папки ресурсов, где мы используем библиотеку.

, так что вы либо должны использовать URL-адрес данных base64, либо образы CDN.

Вы можете кодировать изображения в URL-адрес данных base64 и использовать их как

<img src="data:image/jpg;base64,...">

или привязать к свойству компонента

<img [src]="imageFoo">

Answer 2

Попробуйте это:

src="assets/images/tempImage.png"

Answer 3

Как вы сказали, почему вы не сохранили свои изображения в каталоге src / asset? Он должен работать. Я вижу, у вас есть папка ресурсов в папке компонентов, так это же самое для других компонентов? В любом случае, если вы хотите, чтобы ресурсы углового обслуживания хранились вне src / asset, вы должны указать angular, что вы это сделали, или angular увидит, что это URL-адрес маршрутизации вместо URL-адреса изображения

в angular.json, ищите

"assets": [
              "src/favicon.ico",
              "src/assets"
            ],

добавьте сюда свою собственную папку активов

"assets": [
    "src/favicon.ico",
    "src/assets",
    "src/lib/myComponent/assets"
],

Answer 4

В своем проекте я использовал ../../../assets/images/icon/multi-y-axis-20x20.png

Вы используете .. для перехода в родительскую папку.