{"id":15467158,"url":"https://github.com/matbrady/img-placeholder-src","last_synced_at":"2026-01-31T15:01:15.880Z","repository":{"id":31493304,"uuid":"35057499","full_name":"matbrady/img-placeholder-src","owner":"matbrady","description":"A helper for using strcutured data to populate various image placeholder sources.","archived":false,"fork":false,"pushed_at":"2020-06-18T13:20:16.000Z","size":121,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-10-23T05:21:29.195Z","etag":null,"topics":["image","javascript","placeholder","srcset"],"latest_commit_sha":null,"homepage":"http://matbrady.github.io/img-placeholder-src/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"hussien89aa/KotlinUdemy","license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/matbrady.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-05-04T20:24:15.000Z","updated_at":"2021-11-19T13:16:26.000Z","dependencies_parsed_at":"2022-09-02T12:31:25.836Z","dependency_job_id":null,"html_url":"https://github.com/matbrady/img-placeholder-src","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"purl":"pkg:github/matbrady/img-placeholder-src","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matbrady%2Fimg-placeholder-src","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matbrady%2Fimg-placeholder-src/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matbrady%2Fimg-placeholder-src/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matbrady%2Fimg-placeholder-src/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/matbrady","download_url":"https://codeload.github.com/matbrady/img-placeholder-src/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matbrady%2Fimg-placeholder-src/sbom","scorecard":{"id":623410,"data":{"date":"2025-08-11","repo":{"name":"github.com/matbrady/img-placeholder-src","commit":"415849718f90b39b0a16a47b71dfb95e276b5d4b"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.6,"checks":[{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Code-Review","score":0,"reason":"Found 0/30 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":0,"reason":"license file not detected","details":["Warn: project does not have a license file"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 2 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-21T05:43:43.538Z","repository_id":31493304,"created_at":"2025-08-21T05:43:43.538Z","updated_at":"2025-08-21T05:43:43.538Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28946049,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-31T14:26:55.697Z","status":"ssl_error","status_checked_at":"2026-01-31T14:26:52.545Z","response_time":128,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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","javascript","placeholder","srcset"],"created_at":"2024-10-02T01:20:25.615Z","updated_at":"2026-01-31T15:01:15.862Z","avatar_url":"https://github.com/matbrady.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# img-placeholder-src\n\n\u003e helper for using structured data to populate various image placeholder sources. `18kb/6kb`\n\n[![Build Status](https://travis-ci.org/matbrady/img-placeholder-src.svg?branch=master)](https://travis-ci.org/matbrady/img-placeholder-src) [![npm version](https://badge.fury.io/js/img-placeholder-src.svg?v=3.1.1)](https://badge.fury.io/js/img-placeholder-src)\n\n**[Demo](http://matbrady.github.io/img-placeholder-src/)** showing keys features. For code examples and docs, see below.\n\n## Table of Contents\n\n- [Install](#install)\n- [Usage](#usage)\n- [Node](#node)\n- [Browser](#browser)\n- [Configure](#configure)\n- [API](#api)\n- [Placeholder Image Services](#services)\n- [Why?](#why)\n- [Compatibility](#compatibility)\n- [Changelog](#changelog)\n\n## Install\n\n```\nnpm install img-placeholder-src --save\n```\n\n## Usage\n\n###### Node\n\n```js\nvar IPS = require('img-placeholder-src');\nvar ips = new IPS();\n\nvar imageData = {\n  height: 100,\n  width: 100\n};\n\nvar src = ips.src(imageData, 'placeholdit');\nconsole.log(src);\n/*\nhttp://www.placehold.it/100x100\n*/\n```\n\n```js\nvar IPS = require('img-placeholder-src');\nvar ips = new IPS();\n\nvar srcsetData = [\n  {\n    height: 100,\n    width: 100\n  },\n  {\n    height: 200,\n    width: 200\n  }\n];\n\nvar srcset = ips.srcset(srcsetData, 'placeholdit');\nconsole.log(srcset);\n/*\nhttp://www.placehold.it/100x100 100w, http://www.placehold.it/200x200 200w\n*/\n```\n\n###### Browser\n\nDownload the bundled script file [`img-placeholder-src.bundle.js`](https://github.com/matbrady/img-placeholder-src/blob/master/dist/img-placeholder-src.bundle.js). There is also a none bundle version available, but you will have to include the [srcset](https://www.npmjs.com/package/srcset) dependency yourself.\n\n```js\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n  \u003cscript src=\"img-placeholder-src.bundle.js\"\u003e\u003c/script\u003e\n  \u003cscript\u003e\n  // Initialize/Configure IPS\n  var ips = new IPS({\n    serviceOverride: 'fillmurray'\n  });\n  // Create image data object\n  var imageData = {\n    height: 100,\n    width: 100\n  };\n  // generate image source\n  var src = ips.src(imageData);\n  // create and image element\n  var img1 = document.createElement(\"IMG\");\n  // set the image src attribute\n  img1.setAttribute('src', src);\n  // append the image to the body\n  document.body.appendChild(img1);\n  \u003c/script\u003e\n\u003c/body\u003e\n```\n\nEach service supports different placeholder variations. See [`service_features.md`](docs/service_features.md) for details. An image data object that contains all types of image variations could include the following attributes.\n\n| Attribute    | Options   | Description                                    |\n| :----------- | :-------- | :--------------------------------------------- |\n| `width`      | _integer_ | Width of the image                             |\n| `height`     | _integer_ | Height of the image                            |\n| `filter`     | _string_  | _Optional._ Image filter (provided by service) |\n| `foreground` | _string_  | _Optional._ Image foreground/text color        |\n| `background` | _string_  | _Optional._ Image background color             |\n| `format`     | _string_  | _Optional._ Image format (gif, jpeg, jpg, png) |\n| `text`       | _string_  | _Optional._ Text displayed in the image        |\n| `category`   | _string_  | _Optional._ Image category provided by service |\n| `delay`      | _integer_ | _Optional._ Response delay from server         |\n| `brand`      | _string_  | _Optional._ Brand image                        |\n| `flag`       | _string_  | _Optional._ Flag image                         |\n| `texture`    | _string_  | _Optional._ Texture applied to backgrounds     |\n\n## Configure\n\nThere are several settings that can be applied to the IPS configuration. They include:\n\n```js\nvar IPS = require('img-placeholder-src');\nvar ips = new IPS({\n  serviceOverride: null, // override service name          ex: 'placecage'\n  service: 'placeholdit', // default service name           ex: 'fillmurray'\n  protocol: null // protocol prepended to src url  ex: 'https'\n});\n```\n\n## API\n\n### src(imageData, [service], [options])\n\nAccepts an image data object containing at least a height and width. If the optional `unique` attribute is passed, the image src size will be incremented by the `unique` value. This should be the index within a list. This forces the image services to send a different image instead of sending the same image if a duplicate size is requested. For example, the output would look like:\n\n```js\nvar data = [\n  {height: 300, width: 300},\n  {height: 300, width: 300},\n  {height: 300, width: 300}\n]\nlist.forEach(function(item, index) {\n  console.log( ips.srcset(data, 'placecage', {unique:index}) );\n}\n/*\nhttp://placecage.com/300/300 ...\nhttp://placecage.com/301/301 ...\nhttp://placecage.com/302/302 ...\n*/\n```\n\n### srcset(srcsetData, [service], [options])\n\nAccepts an array of image data objects and returns a string of comma seperated source references and sizes. Optional `options` can be passed to the internal `src()` call.\n\n### register(serviceData)\n\nRegisters a new image service function.\n\n| Attribute  | Options    | Description                                                                                                                                   |\n| ---------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------- |\n| `name`     | _string_   | Name of registered placeholder service                                                                                                        |\n| `render`   | _function_ | `[data]` accepts settings that will populate the image source string which it returns. A template compile function could be used here.        |\n| `modifier` | _function_ | _Optional._ Additional logic to modify data passed to the image template. Accepts a data object and **must:** return the modifed data object. |\n\n```js\nips.register({\n  name: 'placekitten',\n  render: function(args) {\n    return (\n      (typeof args.protocol !== 'undefined' ? args.protocol : '') +\n      '//placekitten.com' +\n      (typeof args.filter !== 'undefined' ? '/' + args.filter : '') +\n      '/' +\n      args.width +\n      '/' +\n      args.width\n    );\n  },\n  modifier: function(data) {\n    return data;\n  }\n});\n\nvar imageData = {\n  height: 100,\n  width: 100,\n  filter: 'greyscale'\n};\n\nvar src = ips.src(imageData, 'placekitten');\nconsole.log(src);\n\n/*\n//placekitten.com/g/100x100\n*/\n```\n\nsee [`services.es6.js`](https://github.com/matbrady/img-placeholder-src/tree/master/src/services.es6.js) for modifier example\n\n## API - Services\n\nThere are shorthand functions for each service. Although, I would recommend to use the base `src` or `srcset` functions. **Why?** In a application you could conditionally override every placeholder src by setting a configuration variable. For example:\n\n```js\nvar serviceOverride = 'fillmurray';\nvar ips = new IPS({\n  serviceOverride: 'fillmurray'\n});\n```\n\n```js\n\u003cimg src=\"{{ ips.src(data, 'placeholdit') }}\" /\u003e\n```\n\nIf `serviceOverride` is set, all image sources would be replaced with `fillmurray` sources rather than `placeholdit`. This allows for quickly changing image sources.\n\n### src(imageData, [options])\n\n### srcset(imageData, [options])\n\n## Services\n\nBy default, these services are supported with no extra configuration. New services can be added by passing a `serviceData` object to the `ips.register` function. See the [API](#registerservicedata) for reference\n\n- [placeholdit](http://placehold.it/)\n- [placeimg](https://placeimg.com/)\n- [fillmurray](http://www.fillmurray.com/)\n- [placecage](http://www.placecage.com/)\n- [lorempixel](http://lorempixel.com/)\n- [satyr](http://satyr.io/)\n\n## Why\n\nPopulating actual content for a front-end that will later be integrated into a CMS is a waste of time. Placeholder content is more efficient and there are several image services out there that you can use. My default has always been [PLACEHOLD.IT](http://placehold.it/) because the file sizes are small, the dimensions are displayed which is helpful for integrators, the image can be customized in a bunch of different ways, and there's no awkward conversation with the client about why [Bill Murray](http://www.fillmurray.com/) is all over their site. The biggest problem with PLACEHOLD.IT is that the image files are so small. They don't accurately represent the final site with actual image content and weight.\n\nAs developers, we should always be testing and optimizing our code to be as efficient and accessible as possible. To do that we need more realistic placeholder content. We need to be able to test with actual images while also using simpler placeholder content for client reviews. This would require manually updating image sources which could be very tedious and time consuming, especially if you are using [responsive image](https://css-tricks.com/video-screencasts/133-figuring-responsive-images/) techniques. Instead, this module makes it possible to define placeholder image attributes like `height` and `width`, then generate the service image `src` and `srcset` attribute on demand.\n\n## Contribute\n\n1. Clone this repo\n2. Build module and run tests `npm run watch`\n\n`npm test` - runs application mocha tests  \n`npm run watch` - runs the wepack build and mocha tests. Watches for new changes  \n`npm run build:dev` - runs the wepack build  \n`npm run dev` - runs the webpack build and tests the application for errors.\n`npm run build` - builds various versions of the script to be used on the demo site and by browser\n\n##### Update Example Page\n\npushes current checked out branch to the remote github-pages (`gh-pages`) branch\n\n```\nnpm run deploy\n```\n\n## Compatibility\n\nLatest Chrome  \nLatest Safari  \nLatest Firefox  \nLatest Mobile Safari  \nIE 9+  \nNode 0.10+ via [TravisCI](https://travis-ci.org/matbrady/img-placeholder-src)\n\n[MIT](http://opensource.org/licenses/MIT) © [Mat Brady](https://github.com/matbrady)\n\n## Changelog\n\nCheckout the [Github release feed](https://github.com/matbrady/img-placeholder-src/releases)\n\n## Todo\n\n- [ ] register custom placeholder template for existing services\n- [ ] override existing templates\n- [ ] investigate whitelisting image options (ex: accepted formats or filters)\n- [x] https support\n- [x] es6 re-write\n- [x] browser support\n- [x] remove extraneous dependencies\n- [x] create distribution package using webpack\n- [x] add global service override function\n- [x] support incrementing source size for custom registered services\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatbrady%2Fimg-placeholder-src","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmatbrady%2Fimg-placeholder-src","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatbrady%2Fimg-placeholder-src/lists"}