Question

我正在尝试使用payment-icons库。而建议的导入方式：

import visa from 'payment-icons/min/flat/visa.svg';

可以工作，并且不能扩展-我最终获得了一堆单独的图标导入，并且为我的站点支持的每个图标都提供了相应的属性。另外，我有一种情况，我根据特定交易支持哪些卡有条件地显示图像，因此甚至没有理由我甚至不需要属性：

是否有更可扩展的懒惰导入方式？

component.ts

import visa from 'payment-icons/min/flat/visa.svg';
import mastercard from 'payment-icons/min/flat/mastercard.svg';
import maestro from 'payment-icons/min/flat/maestro.svg';
import amex from 'payment-icons/min/flat/amex.svg';

// regardless of whether you make it a collection or an array
// this is horrible:

visa = visa;
mastercard = mastercard
maestro = maestro
amex = amex

（然后是<img [attr.src]="visa" alt="Visa"/>）

编辑：

实际上，即使此方法在浏览器中可以使用，它也不会为生产而编译，Cannot find module 'payment-icons/min/flat/mastercard.svg'是ng build --prod。

Answer 1

创建使用服务和输入参数的哑组件

<my-svg [name]="credit-card"> <\my-svg>

在您的服务中，创建一个包含要在项目中使用的所有svg的引用的数组。

在笨拙的组件中，您可以解析从输入中获取的svg名称，并使用服务中的一种方法来解析，该方法将svg文件的名称作为参数并过滤我们的数组并返回引用或能够绑定的内容到我们的img src属性。

哑组件

<div class="my-svg">
<img [src]="imgSrc" />
</div>

我希望可以帮助维持可伸缩性。对于延迟加载图像，您可以尝试使用Intersection Observer

将图像从付款图标库导入Angular的可扩展方式

1 个答案: