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

似乎路由无法正常工作吗？

我尝试了相对路径“ ./”，只是将路径放入而没有任何作用。这似乎比应该做的难，所以我确定我对它的工作原理不了解。

非常感谢您的帮助。

更新我从没有图像可以在按钮上使用，但是我将“ button”标签替换为“ img”标签，并使它像这样...

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

更新2 如果您希望将图像保存在应用程序的“资产”文件夹中，则以上方法适用。我正在构建需要我的资产随身携带的组件库...是否有一种方法可以在组件库中创建一个包含资产的文件夹，您可以使用该组件库来构建和公开该文件夹？

更新3 为了将图像放入组件库中，以便所有内容都是自包含的，您将需要使用工具对图像进行64位编码。我使用了https://base64.guru/converter/encode/image 进入工具后，选择您的图片，然后选择“输出格式” 我使用了“数据URI-data：content / type; base64” 然后单击“将图像编码为基本64”按钮这将输出这样的字符串

数据：图像/ 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目录中？它应该工作。我看到您在组件文件夹中有一个资产文件夹，其他组件也一样吗？无论如何，如果您想要将角度投放资产存储在src / asset之外，则必须告诉角度您这样做，否则角度就会看到它是路由网址而不是图片网址

在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">

访问组件库中的图像

4 个答案: