angular - 访问组件库中的图像

Question

我有一个 Angular 7 组件库，我正在尝试为按钮等添加一些图像。

我的项目结构是这样的

projects
 components
   src
     lib
       myComponent
         assets
            images
               image.png 

我尝试在其中使用图像的组件与“assets”文件夹处于同一级别。

例如我添加了这个按钮

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

...但是当我在 Chrome 中构建和使用开发工具来查看按钮时，图像的路径是
http://localhost/assets/images/tempImage.png

似乎路由无法正常工作？

我试过相对路径，“./”，只是把路径放进去，没有任何效果。这似乎比应该的要难，所以我确定我不了解它是如何工作的。

任何帮助是极大的赞赏。

更新
我从来没有在按钮上使用图像，但我用“img”标签替换了“button”标签，并让它像这样工作......

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

更新 2
如果您希望应用程序的“ Assets ”文件夹中的图像，上述方法有效。我正在构建一个组件库，我需要我的 Assets 随身携带...有没有办法在组件库中创建一个包含 Assets 的文件夹，您可以使用组件库构建和公开该文件夹？

更新 3
为了让你的图像进入你的组件库，以便一切都是自包含的，你需要使用一个工具来对你的图像进行 base 64 编码。
我用了 https://base64.guru/converter/encode/image
进入工具后，选择您的图像，然后选择“输出格式”
我使用了“数据 URI——数据:内容/类型；base64”
然后点击“Encode image to base 64”按钮
这将输出一个这样的字符串

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsSAAALEgHS3X78AAABTElEQVRIie2WwY2DMBBFX1YpICVQQkpwCSmBk+dKCSmB69wogRIowSW4BDpgDx4kFIEwISG7Ur7kAxqL5+/5Bp+GYeAT+vkI9Qv+s2ARqQ8Hi4gDylfBtzgugBpwIlIeDQ6AA+4icj0K7ICgqj1QAo2IXI4AF6oaAVS1AxobbwfH6YOq1kAvIve3gS3RcaZUATervx4MXOfAD/0u3gEugG6uoKqB5LzdErZdjifwFmhJ5zxPwzCsDu99zJzXee/LnLnntYXZ9i26FZHG6sEc1yISrAWLWgWTtjlMFlEDlQUL0oelsnmFLaIihW43ONqRaYDeYK3VO6BX1XvGuzaDLyQHN5KrR7BjIfVLykl1gbm0vo2gUY/PecpJ4Ex6g/f+sjX103F65nprl4FIaoGzXXHjTyRHOT2eU0NKbgeUW4CjnnL8Cv2PW+YXvEe/8QAaBBU+rp8AAAAASUVORK5CYII=

如您所见，上面是“png”图像，请确保此属性与您使用的图像类型相匹配。

一旦你有了这个字符串，你就可以在你的组件中为它设置一个变量，并将这个访问器添加到你想要你的图像的元素中

 [src]="YourImageVariable"

这不适用于按钮，因为 [src] 不是按钮的已知属性，但可以与

Answer 1

由于库组件没有项目根目录，因此它总是从主项目根目录获取 Assets ，即我们正在使用库的 Assets 文件夹。

所以要么你必须使用 base64 数据 URL 或 CDN 图像。

您可以将图像编码为 base64 数据 URL 并像使用它们一样使用它们

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

或绑定(bind)到组件属性

<img [src]="imageFoo">