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>

A) Setup


Install package for node:
`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 string:
`javascript
const onePixelSvg =
'';
const dataImage = 'data:image/svg+xml;base64,' +
Buffer.from(onePixelSvg).toString('base64');
``

---
CLI Build Tools for package.json
- 🎋 add-dist-header:  _Prepend a one-line banner comment (with license notice) to distribution files_
- 📄 copy-file-util:  _Copy or rename a file with optional package version number_
- 📂 copy-folder-util:  _Recursively copy files from one folder to another folder_
- 🪺 recursive-exec:  _Run a command on each file in a folder and its subfolders_
- 🔍 img-src-placeholder:  _Find and replace strings or template outputs in text files_
- 🔢 rev-web-assets:  _Revision web asset filenames with cache busting content hash fingerprints_
- 🚆 run-scripts-util:  _Organize npm package.json scripts into groups of easy to manage commands_
- 🚦 w3c-html-validator:  _Check the markup validity of HTML files using the W3C validator_

Feel free to submit questions at:

github.com/center-key/img-src-placeholder/issues

MIT License