Angular - 捆绑时加载资产

Posted 2023-03-05

【中文标题】Angular - 捆绑时加载资产

【英文标题】：Angular - load assets when bundling

【发布时间】：2020-05-12 18:42:48

【问题描述】：

首先，如果这个问题已经得到回答，我想道歉。我已经尝试在这里和谷歌上搜索，但无法准确找到我正在寻找的内容。这可能是因为我不知道正确的术语，所以希望你能多多包涵。

我目前正在开发一个 Angular 项目，该项目有多个用于按钮作为图标的图像。这些图像，存储在资产中，在一个名为 img (assets/img) 的文件夹中

但是，当显示这些按钮时，图像不会立即加载，而是会在网络选项卡中向 /assets/img/“图像名称”发出请求。这会导致图像在非常小的延迟后加载。这不会是最大的问题，但我相信这是我们面临的另一个问题的原因。

在我们的应用程序中，我们还有一个错误处理程序拦截器。如果由于某种原因，我们失去了与 Web 应用程序的连接，我们有一个弹出组件来通知用户这一点。此弹出组件还有一个用于显示此错误的图像图标。

但是，当我们强制断开连接时，会显示弹出窗口，但无法访问图像图标，因为没有连接。

因此，我正在寻找一种在将应用程序捆绑在一起时包含所有这些图像的方法。在构建应用程序时，有没有办法从 assets/img 中预加载图像？

【参考方案1】：

有不止一种方法可以做到这一点。我首先想到的是使用隐藏的图像标签：

<img src="URL" style="display:none;" />. 

然后它会在它被'使用'之前被浏览器缓存。

另一种方法是创建一个在应用组件 init 上运行的简单服务。

function preloadImage(src) 
    var img = new Image();
    img.src = src;


ngOnInit()  
    this.preloadImage('http://someurl/assests/imgs/img_001.jpg');
    // other onInit stuff

因此，我正在寻找一种在将应用程序捆绑在一起时包含所有这些图像的方法。

这正是资产文件夹的用途。