{"id":26266088,"url":"https://github.com/calvin-ll/webpack-image-placeholder-loader","last_synced_at":"2025-04-30T16:46:36.898Z","repository":{"id":37089146,"uuid":"270072817","full_name":"Calvin-LL/webpack-image-placeholder-loader","owner":"Calvin-LL","description":"Generate a solid color image as placeholder","archived":false,"fork":false,"pushed_at":"2023-01-24T13:04:28.000Z","size":8451,"stargazers_count":24,"open_issues_count":32,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-23T10:42:10.771Z","etag":null,"topics":["image","loader","pixel","placeholder","webpack"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Calvin-LL.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-06-06T18:48:39.000Z","updated_at":"2023-01-31T18:15:53.000Z","dependencies_parsed_at":"2023-02-13T21:30:33.124Z","dependency_job_id":null,"html_url":"https://github.com/Calvin-LL/webpack-image-placeholder-loader","commit_stats":null,"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Calvin-LL%2Fwebpack-image-placeholder-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Calvin-LL%2Fwebpack-image-placeholder-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Calvin-LL%2Fwebpack-image-placeholder-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Calvin-LL%2Fwebpack-image-placeholder-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Calvin-LL","download_url":"https://codeload.github.com/Calvin-LL/webpack-image-placeholder-loader/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251747770,"owners_count":21637404,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["image","loader","pixel","placeholder","webpack"],"created_at":"2025-03-14T03:16:48.303Z","updated_at":"2025-04-30T16:46:36.874Z","avatar_url":"https://github.com/Calvin-LL.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# webpack-image-placeholder-loader\n\n[![npm](https://img.shields.io/npm/v/webpack-image-placeholder-loader?style=flat)](https://www.npmjs.com/package/webpack-image-placeholder-loader) [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=flat)](https://opensource.org/licenses/MIT)\n\nThis loader generates a color or solid color image or blurred image from a given image for use as a placeholder.\n\nUnder the hood this package uses [fast-average-color](https://github.com/fast-average-color/fast-average-color). See [fast-average-color](https://github.com/fast-average-color/fast-average-color) for [examples](https://github.com/fast-average-color/fast-average-color) of colors derived from images.\n\nSupports JPEG, PNG, WebP, TIFF, GIF and SVG images.\n\n## Examples\n\n|               Blurred Placeholder                |              Solid Color Placeholder               |\n| :----------------------------------------------: | :------------------------------------------------: |\n| ![Blurred Background](./screenshots/blurred.gif) | ![Solid Color Background](./screenshots/solid.gif) |\n\n[React](https://github.com/Calvin-LL/webpack-image-placeholder-loader/tree/main/examples/react)\n\n[Vue](https://github.com/Calvin-LL/webpack-image-placeholder-loader/tree/main/examples/vue)\n\n[React example with other related loaders](https://github.com/Calvin-LL/react-responsive-images-example)\n\n[Vue example with other related loaders](https://github.com/Calvin-LL/vue-responsive-images-example)\n\n## Install\n\nInstall with npm:\n\n```bash\nnpm install --save-dev webpack-image-placeholder-loader\n```\n\nInstall with yarn:\n\n```bash\nyarn add --dev webpack-image-placeholder-loader\n```\n\n## Usage\n\n#### Step 1\n\n###### webpack.config.js\n\n```javascript\nmodule.exports = {\n  // ...\n  module: {\n    rules: [\n      // ...\n      {\n        test: /\\.(png|jpe?g|svg|gif|webp|tiff?)$/i,\n        oneOf: [\n          {\n            // if the import url looks like \"some.png?placeholder...\"\n            resourceQuery: /placeholder/,\n            use: {\n              loader: \"webpack-image-placeholder-loader\",\n              options: {\n                format: \"hex\",\n              },\n            },\n          },\n          {\n            // if no previous resourceQuery match\n            use: \"file-loader\",\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n#### Step 2\n\n##### Use in code\n\n```javascript\nimport placeholderUrl from \"./some_pic.png?placeholder\";\n```\n\nTo override options for one import, you can use queries\n\n```javascript\nimport placeholderUrl from \"./some_pic.png?placeholder\u0026size=original\";\n```\n\n### Other usage\n\nWith default options:\n\n```javascript\nimport placeholderUrl from \"!!webpack-image-placeholder-loader!./some_pic.png\";\n```\n\nWith specified options:\n\n```javascript\nimport placeholderUrl from \"!!webpack-image-placeholder-loader!./some_pic.png?format=base64\u0026size=1\u0026color=sqrt\u0026backgroundColor=white\";\n```\n\n## Options\n\n|                   Name                    |                        Type                         |  Default   |                                                                                                                        Description                                                                                                                        |\n| :---------------------------------------: | :-------------------------------------------------: | :--------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |\n|          **[`format`](#format)**          | `\"base64\", \"blurred-svg\", \"hex\", \"rgb\", or \"array\"` | `\"base64\"` |                                                                                                                 The format of the output.                                                                                                                 |\n|            **[`size`](#size)**            |               `number or \"original\"`                |    `1`     |                                                                             The size of the output image if `format` is `\"base64\"`, no effect if the format is anything else.                                                                             |\n|     **[`blurQuality`](#blurQuality)**     |                      `number`                       |    `1`     |                                           The quality of blur image if `format` is `\"blurred-svg\"`, no effect if the format is anything else. Possible values from 0 (not including 0) to 100 (including 100).                                            |\n|           **[`color`](#color)**           |                  `string\\|object`                   |  `\"sqrt\"`  | An [algorithm](https://github.com/fast-average-color/fast-average-color/blob/master/docs/algorithms.md) (\"simple\", \"sqrt\" or \"dominant\") to generate a color from a given image, or a color string or color object to use in generating the output image. |\n| **[`backgroundColor`](#backgroundcolor)** |                  `string\\|object`                   |  `\"#FFF\"`  |                                                                                             The background color to use if the given image has transparency.                                                                                              |\n|        **[`esModule`](#esmodule)**        |                      `boolean`                      |   `true`   |                                                                                          Whether the export is in ES modules syntax or CommonJS modules syntax.                                                                                           |\n\n### `format`\n\nWith\n\n```javascript\nimport placeholderUrl from \"./some_pic.png?placeholder\";\n```\n\n- `format: \"base64\"`: `placeholderUrl === \"data:image/png;base64,iVBORw0KG...\"`\n- `format: \"blurred-svg\"`: `placeholderUrl === \"data:image/svg+xml;charset=utf-8,%3Csvg xmlns=...\"`\n- `format: \"hex\"`: `placeholderUrl === \"#6b7548\"`\n- `format: \"rgb\"`: `placeholderUrl === \"rgb(107, 117, 72)\"`\n- `format: \"array\"`: `placeholderUrl === [107, 117, 72]\"`\n\n### `size`\n\n`size` will only take effect if `format: \"base64\"`. When `size` is a number, the output image will be a square of the given number of pixels. When `size: \"original\"`, the output image will be the size of the original image.\n\n### `color`\n\n`color` can be an [algorithm](https://github.com/fast-average-color/fast-average-color/blob/master/docs/algorithms.md) (\"simple\", \"sqrt\" or \"dominant\") to generate a color from a given image (see examples in [algorithm](https://github.com/fast-average-color/fast-average-color/blob/master/docs/algorithms.md)), or a color string or color object to use in generating the output image.\n\nA color string or color object is any valid colors accepted by [TinyColor](https://github.com/bgrins/TinyColor).\n\nFor example:\n\n```javascript\n{\n  color: \"white\",\n  format: \"base64\"\n}\n```\n\nwill output a white pixel.\n\n```javascript\n{\n  color: \"white\",\n  format: \"hex\"\n}\n```\n\nwill output `#FFFFFF`\n\n### `backgroundColor`\n\nIf an image has transparency, `backgroundColor` will be used as the background color. By default `backgroundColor` is white.\n\n### `blurQuality`\n\nWhen used with `\"blurred-svg\"`, the image is first shunk by this percentage, stretched, then blurred.\n\n`1` is 1/100 of the original quality. `100` is the original quality (DO NOT recommand using 100). Can be decimal numbers too, `0.1` would be 1/1000 of the original quality. The lower the value, the more blurry the image will be, and the smaller the size.\n\n### `esModule`\n\nWhether the export is in ES modules syntax or CommonJS modules syntax. If you don't know what it is or whether or not you need it, leave is as default.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcalvin-ll%2Fwebpack-image-placeholder-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcalvin-ll%2Fwebpack-image-placeholder-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcalvin-ll%2Fwebpack-image-placeholder-loader/lists"}