前言
在前端开发中，我们常常需要加载图片以及其他资源。随着不同设备的出现，同一张图片可能需要在不同的分辨率下呈现，为此，我们需要使用 srcset 属性来指定不同分辨率下的图片资源。然而，在使用 srcset 时，我们需要对包含不同图片资源的字符串进行解析，这时候就可以使用 parse-srcset 这个非常方便的 npm 包。
解析 srcset 字符串
先来看一下 srcset 的标准写法：
<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="A beautiful photograph">
在使用 srcset 属性时，我们需要指定一张默认的图片（即 src 属性的值），并在 srcset 中列出其他可用的图片资源。其中，每个图片资源后面需要加上相应的宽度描述符，例如 1000w。
以下是一个 srcset 字符串的例子：
const srcset = "small.jpg 500w,\ medium.jpg 1000w,\ large.jpg 2000w,\ extralarge.jpg 3000w"
对于类似上面的图像资源描述字符串，我们通常需要实现一个解析函数，从中读取出每个图片资源的 URL 和宽度描述符。而 parse-srcset 就是一个可以实现这种解析的 npm 库。
使用 parse-srcset
安装
parse-srcset 可以使用 npm 安装。
npm install parse-srcset --save
使用
在引入 parse-srcset 后，我们可以使用 parse 函数来解析 srcset 字符串。
import { parse } from 'parse-srcset'; const srcset = 'small.jpg 500w, medium.jpg 1000w, large.jpg 2000w'; const parsed = parse(srcset); console.log(parsed);
输出结果如下：
[ { url: 'small.jpg', width: 500 }, { url: 'medium.jpg', width: 1000 }, { url: 'large.jpg', width: 2000 } ]
参数说明
parse 函数接受一个字符串作为参数，即需要解析的 srcset 字符串。返回值是一个包含若干对象的数组，每个对象都包含一个 url 和一个 width 属性，分别表示图片资源的 URL 和宽度描述符对应的数值。
实例
下面是一个实际的应用场景。我们需要根据屏幕尺寸动态选择使用不同大小的图片资源。
-- -------------------- ---- ------- ------ - ----- - ---- --------------- ----- ------------ - - - --------- -- --------- ---- ----- ------- -- - --------- ---- --------- ----- ----- -------- -- - --------- ----- ----- ------- - -- ----- ----- - ------------------------------ ----- ------ - ----------------------------- ----- ------ - -------------- --- --------------- --- ------ ------ -- ------------- - -- ------------------------------- --------------------- ----------------- - ---- ----------- ---------------------- - -------------- - -------------- - ------- ------ - - ----- ------------- - ----------------- -- -------------------------------------------------- -- ---------- --------- - ------------------展开代码
首先，我们定义了一个 mediaQueries 数组，其中包含了不同的屏幕尺寸区间和对应的图片资源大小。然后，我们获取了要加载的图片节点以及相关的 srcset 字符串，并使用 parse 函数解析出包含图片资源 URL 和宽度描述符的对象数组。接下来，我们遍历 mediaQueries 数组，查找匹配当前设备屏幕尺寸的配置项，并使用 -size 的后缀匹配合适的图片资源。最后，将选择出来的图片资源 URL 赋值给图片节点的 src 属性即可。
总结
在前端开发中，我们经常需要使用 srcset 属性来指定不同尺寸下的图片资源，这时候就需要解析 srcset 字符串。 parse-srcset 是一个非常方便的 npm 包，它可以帮助我们轻松地解析 srcset 字符串，从而为前端开发工作带来极大的便利。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc61db5cbfe1ea0612238
