在前端开发中，我们经常需要加载并显示图片。然而，有时候我们可能会遇到一些问题，比如图片链接失效或损坏。这种情况下，如果不进行处理，可能会导致页面加载速度变慢，用户体验不佳。因此，在本文中，我将介绍如何使用 Angular 2 来检查图片 URL 是否有效或损坏。
步骤
- 引入 http 模块：
------ - ----- -------- - ---- ---------------- ------ - ---------- - ---- ------------------ ------ ------------------------ ------ --------------------------
- 创建一个服务，并注入 http 模块：
-------------
------ ----- ------------ -
------------------- ------ ----- --
--------------- -------- ------------------- -
------ -------------------
---------- --------- -- -----
-------------- ---- -- ----------------------
-
-- 在组件中使用该服务：
------------
--------- ------------
--------- -
---- ----------- ----------------
---- ------------------------ ----- ---------
-
--
------ ----- -------------- ---------- ------ -
-------- ---- -------
-------- --------
------------------- -------------- ------------- --
----------- ---- -
---------------------------------------
------------------ -- ------------ - ---------
-
-解释
在上述示例代码中，我们创建了一个 ImageService 服务，并注入了 Http 模块。该服务提供了一个 checkImage() 方法，输入参数为图片的 URL，返回值为一个 Observable<boolean> 类型的对象。在 checkImage() 方法中，我们使用 Http.get() 方法来获取图片资源，然后通过 map() 操作符将响应转换为布尔类型的 true，表示图片链接有效；如果请求失败，我们则通过 catch() 操作符返回一个布尔类型的 false。
在组件中，我们使用 *ngIf 指令来根据 isValid 变量的值来判断是否显示图片或者错误信息。
总结
通过以上步骤，我们可以轻松地检查图片 URL 是否有效或损坏。这不仅可以提高页面加载速度和用户体验，而且还可以避免出现一些奇怪的问题。希望本文对你有所帮助！
完整示例代码如下：
------ - ---------- ----------- ------ ------ - ---- ----------------
------ - ----- -------- - ---- ----------------
------ - ---------- - ---- ------------------
------ ------------------------
------ --------------------------
------ -------------------------
-------------
------ ----- ------------ -
------------------- ------ ----- --
--------------- -------- ------------------- -
------ -------------------
---------- --------- -- -----
-------------- ---- -- ----------------------
-
-
------------
--------- ------------
--------- -
---- ----------- ----------------
---- ------------------------ ----- ---------
-
--
------ ----- -------------- ---------- ------ -
-------- ---- -------
-------- --------
------------------- -------------- ------------- --
----------- ---- -
---------------------------------------
------------------ -- ------------ - ---------
-
-来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/29365