npm 包 getem 是一个可以方便快捷地获取远程图片的工具。它可以通过图片的 URL，直接将图片下载到本地并将下载后的路径返回给开发者。这是非常实用的，因为我们在前端项目中，经常需要使用图片资源。如果每次都手动下载图片并将其保存在本地，那将会非常麻烦。因此，getem 就提供了一个简单的解决方案，能够让我们在编写前端代码时，更加方便地使用远程图片。
安装
我们可以使用 npm 或 yarn 来安装 getem，这里以 npm 为例：
$ npm install getem
使用方法
使用 getem 的方式非常简单，只需要引入它，然后在我们需要获取图片的地方调用它即可。比如我们要获取一张图片：
-- -------------------- ---- ------- ----- ----- - ----------------- -- ------ ----- ------ - ---------------------------- -- ------ ----- -------- - -------------- ------------- -------------------- -- - ----------------- -- -------------- -------------- -- - ------------------------- ---
在上面的代码中，我们首先引入了 getem，然后将图片的远程地址和本地存储路径传递给它。getem 会自动下载图片并将其存储到指定的本地路径，然后返回该路径。我们只需要使用返回的本地路径即可在前端项目中使用图片资源了。
参数说明
getem 方法有两个参数：
- imgUrl（必须）：表示远程图片的 URL 地址。
- savePath（可选）：表示存储图片的路径，如果不传递该参数，则 getem 会自动生成一个随机文件名来存储该图片。
注意事项
- getem 会根据图片的 MIME 类型来判断图片的格式，并使用相应的方法将其保存到本地。因此，我们使用 getem 时，需要确保远程图片的格式正确。
- getem 可以有效避免图片重复下载，如果我们已经下载过某张图片，再次使用 getem 下载时，getem 会直接返回已经下载好的图片路径，而不会重复下载。
- 为了避免文件名冲突，我们可以使用随机文件名作为存储路径，也可以在 savePath 中指定任何其他的路径。
示例代码
以下是一个完整的使用 getem 的示例代码：
-- -------------------- ---- ------- ----- ----- - ----------------- -- ------ ----- ------ - ---------------------------- -- ------ ----- -------- - -------------- ------------- -------------------- -- - ----------------- -- -------------- -------------- -- - ------------------------- ---
总结
通过本文我们了解了 getem 工具的使用方法和注意事项。getem 可以帮助我们在前端项目中更加方便地使用远程图片资源，从而提高项目开发的效率。同时，我们也需要注意 getem 的使用场景和参数的正确传递。在实际开发中，我们可以灵活运用 getem，为项目开发带来便利。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562e181e8991b448e065c