Replace src=# in <img> tags with a data URL of a transparent 1 pixel image (CLI for package.json scripts)
npm install img-src-placeholder_Replace src=# in 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)_



img-src-placeholder solves the trickly little problem that valid HTML requires that all tags
have a src attribute even if your web application sets the src attribute dynamically.
This tool transforms:
``html``
into:html` alt=avatar>
width=800 alt=screenshot>
shell
$ npm install --save-dev img-src-placeholder
`B) Usage
$3
`
img-src-placeholder [SOURCE] [TARGET]
`
Parameters:
The first parameter is the source* folder or file.
The second parameter is the target* folder.$3
Run img-src-placeholder from the "scripts" section of your package.json file.Example package.json scripts:
`json
"scripts": {
"stage-web": "img-src-placeholder src/web build/website",
},
`$3
Example terminal commands:
`shell
$ npm install --save-dev img-src-placeholder
$ npx img-src-placeholder src/web ext=.html docs/api-manual
`
You can also install img-src-placeholder globally (--global) and then run it anywhere directly from the terminal.$3
Command-line flags:
| Flag | Description | Value |
| --------------- | ------------------------------------------------ | ---------- |
| --cd | Change working directory before starting search. | string |
| --ext | Filter files by file extension, such as .html.
Use a comma to specify multiple extensions. | string |
| --note | Place to add a comment only for humans. | string |
| --quiet | Suppress informational messages. | N/A |
| --summary | Only print out the single line summary message. | N/A |The default value for
--ext is: ".html,.htm,.php,.aspx,.asp,.jsp"$3
- img-src-placeholder src/web build/website
Recursively copies all HTML files in the src/web folder to the build/website folder and
replaces the "hash" placeholder image sources with an inline data URL for a transparent 1 pixel
image. -
img-src-placeholder src/web build/website --summary
Displays the summary informaion but not informaion about individual files copied. -
img-src-placeholder src/web build/website --ext=.php
Only processes PHP files. -
img-src-placeholder src/web 'build/Website Root' --ext=.php
Specifies a destination folder that has a space in its name.> [!NOTE]
> _Single quotes in commands are normalized so they work cross-platform and avoid the errors often encountered on Microsoft Windows._
C) Application Code
Even though img-src-placeholder is primarily intended for build scripts, the package can be used programmatically in ESM and TypeScript projects.Example:
` typescript
import { imgSrcPlaceholder } from 'img-src-placeholder';const options = { extensions: ['.html'] };
const results = imgSrcPlaceholder.transform('src/web', 'build', options);
console.info('Number of files copied:', results.count);
`See the TypeScript Declarations at the top of img-src-placeholder.ts for documentation.
D) Under the Hood
The data URL is created by Base64 encoding a super simple