在前端开发中，我们常常需要用到占位图片来代替一些还未上线的资源。fill-murray-react 是一个可以快速生成随机漂亮的图片的 npm 包，它使用了 Bill Murray 的图片作为数据源，并提供了 React 组件的形式来方便开发者使用。本文将介绍 fill-murray-react 的安装、使用方式，并且附上示例代码。
安装
使用 fill-murray-react 前，需要在项目中安装该 npm 包。可以使用 npm 或 yarn 进行安装：
npm install fill-murray-react
或
yarn add fill-murray-react
安装成功之后，就可以在项目中使用 fill-murray-react 了。
使用
fill-murray-react 提供了一个组件：FillMurray。我们可以在 React 组件中使用 FillMurray，来生成随机的 Bill Murray 图片。FillMurray 组件包含了一些属性，可以用来控制生成的图片的大小、主题等。下面是 FillMurray 的属性列表：
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| width | number | 200 | 图片宽度，单位是 px |
| height | number | 150 | 图片高度，单位是 px |
| grayscale | bool | false | 是否生成黑白图片 |
| sepia | bool | false | 是否生成 sepia 风格的图片 |
| blur | bool | false | 是否对图片进行高斯模糊处理 |
| pixelate | bool | false | 是否对图片进行像素化处理 |
| rounded | bool | false | 是否将图片裁剪成圆形 |
| borderWidth | number | 0 | 图片边框大小，单位是 px |
| borderColor | string | #000 | 图片边框颜色，可以是任何 CSS 颜色格式 |
| backgroundColor | string | #fff | 图片的背景颜色，可以是任何 CSS 颜色格式 |
下面是使用 FillMurray 的例子，这里生成了一张 400x300 的彩色图片：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- - ---- --------------------
-------- --------- -
------ -
-----
----------- ----------- ------------ --
------
--
-
------ ------- --------下面是一个更加复杂的例子，这里生成了一张 400x400 的黑白圆形图片，边框宽度为 5px，边框颜色为红色，背景色为蓝色：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- - ---- --------------------
-------- --------- -
------ -
-----
-----------
-----------
------------
---------
-------
---------------
------------------
----------------------
--
------
--
-
------ ------- --------至此，我们已经介绍了 fill-murray-react 的安装、使用方式，并且给出了示例代码。使用 fill-murray-react 可以轻松生成随机图片，方便开发者进行前端开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005642281e8991b448e14fd