{"id":22897277,"url":"https://github.com/center-key/img-src-placeholder","last_synced_at":"2025-08-12T02:32:50.578Z","repository":{"id":61733951,"uuid":"554614179","full_name":"center-key/img-src-placeholder","owner":"center-key","description":"👾 Replace src=# in \u003cimg\u003e tags with a Base64 data URL of a 1 pixel image  (CLI for package.json scripts)","archived":false,"fork":false,"pushed_at":"2024-08-14T17:04:14.000Z","size":274,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-12-03T02:11:54.309Z","etag":null,"topics":["base64","data-url","html","img"],"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/center-key.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-10-20T05:08:11.000Z","updated_at":"2024-08-14T17:04:07.000Z","dependencies_parsed_at":"2024-01-25T17:41:04.152Z","dependency_job_id":"9ce6aeb1-9ec2-47ed-96a8-f55858170f32","html_url":"https://github.com/center-key/img-src-placeholder","commit_stats":{"total_commits":14,"total_committers":1,"mean_commits":14.0,"dds":0.0,"last_synced_commit":"56b0f89c0d06316739c657c2bf166304fd61cca8"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/center-key%2Fimg-src-placeholder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/center-key%2Fimg-src-placeholder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/center-key%2Fimg-src-placeholder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/center-key%2Fimg-src-placeholder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/center-key","download_url":"https://codeload.github.com/center-key/img-src-placeholder/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229629369,"owners_count":18101275,"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":["base64","data-url","html","img"],"created_at":"2024-12-14T00:16:24.208Z","updated_at":"2025-08-12T02:32:50.562Z","avatar_url":"https://github.com/center-key.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# img-src-placeholder\n\u003cimg src=https://centerkey.com/graphics/center-key-logo.svg align=right width=200 alt=logo\u003e\n\n_Replace `src=#` in `\u003cimg\u003e` tags of HTML files with an inline Base64 data URL of a transparent 1 pixel image (CLI tool designed for use in npm package.json scripts)_\n\n[![License:MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://github.com/center-key/img-src-placeholder/blob/main/LICENSE.txt)\n[![npm](https://img.shields.io/npm/v/img-src-placeholder.svg)](https://www.npmjs.com/package/img-src-placeholder)\n[![Build](https://github.com/center-key/img-src-placeholder/actions/workflows/run-spec-on-push.yaml/badge.svg)](https://github.com/center-key/img-src-placeholder/actions/workflows/run-spec-on-push.yaml)\n\n**img-src-placeholder** solves the trickly little problem that valid HTML requires that all `\u003cimg\u003e` tags\nhave a `src` attribute even if your web application sets the `src` attribute dynamically.\n\nThis tool transforms:\n```html\n\u003cimg src=# alt=avatar\u003e\n```\ninto:\n```html\n\u003cimg src=\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxIiBoZWlnaHQ9IjEiPjwvc3ZnPg==\"\n   alt=avatar\u003e\n```\n\n\u003cimg src=https://raw.githubusercontent.com/center-key/img-src-placeholder/main/screenshot.png\nwidth=800 alt=screenshot\u003e\n\n## A) Setup\nInstall package for node:\n```shell\n$ npm install --save-dev img-src-placeholder\n```\n\n## B) Usage\n### 1. npm package.json scripts\nRun `img-src-placeholder` from the `\"scripts\"` section of your **package.json** file.\n\nParameters:\n* The **first** parameter is the *source* folder or file.\n* The **second** parameter is the *target* folder.\n\nExample **package.json** scripts:\n```json\n   \"scripts\": {\n      \"stage-web\": \"img-src-placeholder src/web build/website\",\n   },\n```\n\n### 2. Command-line npx\nExample terminal commands:\n```shell\n$ npm install --save-dev img-src-placeholder\n$ npx img-src-placeholder src/web ext=.html docs/api-manual\n```\nYou can also install **img-src-placeholder** globally (`--global`) and then run it anywhere directly from the terminal.\n\n### 3. CLI flags\nCommand-line flags:\n| Flag            | Description                                      | Value      |\n| --------------- | ------------------------------------------------ | ---------- |\n| `--cd`          | Change working directory before starting search. | **string** |\n| `--ext`         | Filter files by file extension, such as `.html`.\u003cbr\u003eUse a comma to specify multiple extensions. | **string** |\n| `--note`        | Place to add a comment only for humans.          | **string** |\n| `--quiet`       | Suppress informational messages.                 | N/A        |\n| `--summary`     | Only print out the single line summary message.  | N/A        |\n\nThe default value for `--ext` is: `\".html,.htm,.php,.aspx,.asp,.jsp\"`\n\n### 4. Example CLI usage\nExamples:\n   - `img-src-placeholder src/web build/website`\u003cbr\u003e\n   Recursively copies all HTML files in the **src/web** folder to the **build/website** folder and\n   replaces the \"hash\" placeholder image sources with an inline data URL for a transparent 1 pixel\n   image.\n\n   - `img-src-placeholder src/web build/website --summary`\u003cbr\u003e\n   Displays the summary but not the individual files copied.\n\n   - `img-src-placeholder src/web build/website --ext=.php`\u003cbr\u003e\n   Only processes PHP files.\n\n   - `img-src-placeholder src/web 'build/Website Root' --ext=.php`\u003cbr\u003e\n   Specifies a destination folder that has a space in its name.\n\n_**Note:** Single quotes in commands are normalized so they work cross-platform and avoid the errors often encountered on Microsoft Windows._\n\n## C) Application Code\nEven though **img-src-placeholder** is primarily intended for build scripts, the package can be used programmatically in ESM and TypeScript projects.\n\nExample:\n``` typescript\nimport { imgSrcPlaceholder } from 'img-src-placeholder';\n\nconst options = { extensions: ['.html'] };\nconst results = imgSrcPlaceholder.transform('src/web', 'build', options);\nconsole.info('Number of files copied:', results.count);\n```\n\nSee the **TypeScript Declarations** at the top of [img-src-placeholder.ts](src/img-src-placeholder.ts) for documentation.\n\n## D) Under the Hood\nThe data URL is created by **Base64** encoding a super simple `\u003csvg\u003e` string:\n```javascript\nconst onePixelSvg =\n   '\u003csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"1\" height=\"1\"\u003e\u003c/svg\u003e';\nconst dataImage = 'data:image/svg+xml;base64,' +\n   Buffer.from(onePixelSvg).toString('base64');\n```\n\n\u003cbr\u003e\n\n---\n**CLI Build Tools for package.json**\n   - 🎋 [add-dist-header](https://github.com/center-key/add-dist-header):\u0026nbsp; _Prepend a one-line banner comment (with license notice) to distribution files_\n   - 📄 [copy-file-util](https://github.com/center-key/copy-file-util):\u0026nbsp; _Copy or rename a file with optional package version number_\n   - 📂 [copy-folder-util](https://github.com/center-key/copy-folder-util):\u0026nbsp; _Recursively copy files from one folder to another folder_\n   - 🪺 [recursive-exec](https://github.com/center-key/recursive-exec):\u0026nbsp; _Run a command on each file in a folder and its subfolders_\n   - 🔍 [img-src-placeholder](https://github.com/center-key/img-src-placeholder):\u0026nbsp; _Find and replace strings or template outputs in text files_\n   - 🔢 [rev-web-assets](https://github.com/center-key/rev-web-assets):\u0026nbsp; _Revision web asset filenames with cache busting content hash fingerprints_\n   - 🚆 [run-scripts-util](https://github.com/center-key/run-scripts-util):\u0026nbsp; _Organize npm package.json scripts into groups of easy to manage commands_\n   - 🚦 [w3c-html-validator](https://github.com/center-key/w3c-html-validator):\u0026nbsp; _Check the markup validity of HTML files using the W3C validator_\n\nFeel free to submit questions at:\u003cbr\u003e\n[github.com/center-key/img-src-placeholder/issues](https://github.com/center-key/img-src-placeholder/issues)\n\n[MIT License](LICENSE.txt)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcenter-key%2Fimg-src-placeholder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcenter-key%2Fimg-src-placeholder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcenter-key%2Fimg-src-placeholder/lists"}