访问组件库中的图像

Question

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

我的项目结构是这样的

projects
 components
   src
     lib
       myComponent
         assets
            images
               image.png

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

例如我添加了这个按钮

<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" 文件夹中的图像，则以上方法有效。我正在构建一个组件库，我需要我的资产随身携带...有没有办法在组件库中创建一个包含资产的文件夹，您可以使用组件库构建和公开该文件夹？

更新 3 为了将您的图像放入您的组件库中以便所有内容都是独立的，您需要使用一种工具来对您的图像进行 base 64 编码。我用了 https://base64.guru/converter/encode/image 一旦进入工具 select 您的图像，然后选择 "Output Format" 我用了 "Data URI -- data:content/type;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/images/icon/multi-y-axis-20x20.png

您使用 .. 上层文件夹。

Answer 2

试试这个：

src="assets/images/tempImage.png"

Answer 3

如您所说，为什么不将图像存储在 src/asset 目录中？它应该工作。我看到您在组件文件夹中有一个资产文件夹，其他组件是否也一样？无论如何，如果你想要 angular 服务存储在 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

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

因此您必须使用 base64 数据 URL 或 CDN 图像。

您可以将图像编码为 base64 数据 URL 并像

一样使用它们

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

或绑定到组件属性

<img [src]="imageFoo">

访问组件库中的图像

Access images in component library

angular-components

angular