Angular 访问组件库中的图像

我有一个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>

---

这将不适用于按钮，因为[src]不是按钮的已知属性，但它可以用于我使用的项目中的

。/../assets/images/icon/multi-y-axis-20x20.png

您可以使用

。

进入父文件夹。

尝试以下操作：

src="assets/images/tempImage.png"

---

正如您所说，为什么不将图像存储在src/asset目录中？它应该会起作用。我看到您在component文件夹中有一个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"
],

---

因为库组件没有项目根，所以它总是从主项目根（即我们使用库的资源文件夹）获取资源

因此，您必须使用base64数据URL或CDN映像

您可以将图像编码到base64数据URL，并像下面这样使用它们

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

或绑定到组件属性

<img [src]="imageFoo">

谢谢，我已经试过了。我使用VSCode中内置的intellisence来选择文件，但它仍然没有显示。您是否尝试在路径中添加更多../内容？是的，我尝试了所有操作。。。在Chrome开发工具中观察到的路径解析为基础应用程序（测试线束），而不是组件库。虽然这个代码片段可能解决了问题，但它没有解释为什么或者如何回答这个问题。请，因为这确实有助于提高你的文章质量。请记住，您将在将来回答读者的问题，而这些人可能不知道您的代码建议的原因。这是可行的，但是它不适用于Angular 7中的按钮，我无法使用图像，但我使用的是带有（单击）操作的标签。我认为这是可行的（如果我想把我的图像放到应用程序中，它就做到了）我不想将我的组件库的图像放在“应用程序资源”文件夹中…我想要一个与我的组件库一起移动的资源文件夹，在那里我可以访问图像…这不起作用。对此有什么想法吗？这是在组件库外编辑一个文件，因此在打开组件库时不会包括更改已安装。我确实尝试过，但它不起作用。图像在哪里？它可以与组件库一起打包吗？好的，这是答案，但不是完整答案…完整答案是，首先需要使用工具对图像进行64进制编码，我使用了-然后可以将变量设置为“data:URI”（这是编码前需要选择的类型）类似，并且它可以工作。

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

<img [src]="imageFoo">