访问组件库中的图像答案

【问题标题】：Access images in component library访问组件库中的图像
【发布时间】：2019-08-30 21:39:42
【问题描述】：

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

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

数据：图像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsSAAALEgHS3X78AAABTElEQVRIie2WwY2DMBBFX1YpICVQQkpwCSmBk + dKCSmB69wogRIowSW4BDpgDx4kFIEwISG7Ur7kAxqL5 + / 5BP + GYeAT + vkI9Qv + s2ARqQ8Hi4gDylfBtzgugBpwIlIeDQ6AA + 4icj0K7ICgqj1QAo2IXI4AF6oaAVS1AxobbwfH6YOq1kAvIve3gS3RcaZUATervx4MXOfAD / 0u3gEugG6uoKqB5LzdErZdjifwFmhJ5zxPwzCsDu99zJzXee / LnLnntYXZ9i26FZHG6sEc1yISrAWLWgWTtjlMFlEDlQUL0oelsnmFLaIihW43ONqRaYDeYK3VO6BX1XvGuzaDLyQHN5KrR7BjIfVLykl1gbm0vo2gUY / PecpJ4Ex6g / F + sjX103F65nprl4FIaoGzXXHjTyRHOT2eU0NKbgeUW4CjnnL8Cv2PW + YXvEe / 8QAaBBU + rp8AAAAASUVORK5CYII = P>

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

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

 [src]="YourImageVariable"

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

一起使用

【问题讨论】：

标签： angular angular-components

【解决方案1】：

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

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

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

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

或绑定到组件属性

<img [src]="imageFoo">

【讨论】：

图像在哪里？可以和组件库一起打包吗？
好吧，这就是答案，但它不是完整的答案……完整的答案是首先你需要使用一个工具来对你的图像进行 base 64 编码，我使用了base64.guru/converter/encode/image - 然后您可以像将变量设置为“data:URI”（这是编码前需要选择的类型），它会起作用。

【解决方案2】：

正如你所说，你为什么不将图像存储在 src/asset 目录中？它应该工作。我看到您在组件文件夹中有一个资产文件夹，那么其他组件也一样吗？无论如何，如果你想要存储在 src/asset 之外的 Angular 服务资产，你必须告诉 Angular 你这样做了，否则 Angular 会看到它是路由 url 而不是图像 url

在 angular.json 中，寻找

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

在此处添加您自己的资产文件夹

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

【讨论】：

这是在组件库之外编辑文件，因此在安装组件库时不会包含更改。但是我确实尝试过，但它没有用。

【解决方案3】：

试试这个：

src="assets/images/tempImage.png"

【讨论】：

虽然这段代码 sn-p 可以解决问题，但它没有解释为什么或如何回答这个问题。请include an explanation for your code，因为这确实有助于提高您的帖子质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。
这行得通，但是它不适用于
我认为这行得通（如果我想把我的图像放在应用程序中，它确实有效）我不想把我的组件库的图像放在应用程序资产文件夹中......我想要与我的组件库一起旅行的资产文件夹，我可以在其中访问图像......这不起作用。对此有何想法？

【解决方案4】：

在我的项目中，我使用了../../../assets/images/icon/multi-y-axis-20x20.png

您使用.. 上一级文件夹。

【讨论】：

谢谢，我试过了。我使用 VSCode 内置的智能来选择文件，它仍然没有显示。
您尝试在路径中添加更多 ../ 吗？
是的，我已经尝试了一切......并且在 Chrome 开发工具中观察到的路径解析为基础应用程序（测试工具）而不是组件库