Installations

npm install gulp-replace-image-src-from-data-attr

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

10.15.3

NPM Version

6.9.0 Score

63.4

Supply Chain

96.6

Quality

72.9

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

0

Total

0

Closed

0

Issues

Open

0

Total

0

Closed

0

Releases

Unable to fetch releases

Contributors

1

Unable to fetch Contributors

View all 1 contributors

Languages

2

HTML

JavaScript

HTML (72.05%)

JavaScript (27.95%)

Developer

ToNyOyO

Download Statistics

Total Downloads

1,799

Last Day

5

Last Week

8

Last Month

31

Last Year

198

GitHub Statistics

19 Commits

1 Branches

1 Contributors

Maintainers

1

Package Meta Information

Latest Version

1.0.8

Package Id

gulp-replace-image-src-from-data-attr@1.0.8

Unpacked Size

19.46 kB

Size

4.25 kB

File Count

10

NPM Version

6.9.0

Node Version

10.15.3

Total Downloads

Cumulative downloads

Total Downloads

1,799

Last day

0%

5

Compared to previous day

Last week

-27.3%

8

Compared to previous week

Last month

675%

31

Compared to previous month

Last year

-16.5%

198

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

4

cheerio plugin-error vinyl through2

Dev Dependencies

3

gulp mocha require

Versions

gulp-replace-image-src-from-data-attr

Replace the "src" attribute of <img> tags with specific path from the "data-local-src" attribute in HTML files (or any attribute you specify).

It is very easy to replace the IMG "src" with an alternative "src" throughout your project HTML file.

Installation

Install package with NPM and add it to your development dependencies:

npm install --save-dev gulp-replace-image-src-from-data-attr

Usage

Example 1:

Replace images and copy the new file to a folder in the root called dist.

1var rep = require('gulp-replace-image-src-from-data-attr');
2const gulp = require('gulp');
3
4function replace() {
5
6    return gulp
7        .src('**/*.html')
8        .pipe(rep({
9            keepOrigin : false
10        }))
11        .pipe(gulp.dest('dist/'));
12
13}
14
15exports.replace = replace;
16exports.default = replace;

Example 2:

Using the gulp-rename package to create the file in the exising directory and adding -dist to the end of the filename:

1var rep = require('gulp-replace-image-src-from-data-attr');
2const gulp = require('gulp');
3const rename = require('gulp-rename');
4
5function replace() {
6
7    return gulp
8        .src('**/*.html')
9        .pipe(rep({
10            keepOrigin : false
11        }))
12        .pipe(rename(function(path){
13            path.basename += '-dist';
14        }))
15        .pipe(gulp.dest('.'));
16}
17
18exports.replace = replace;
19exports.default = replace;

Result

If the original HTML is like this:

1<body>
2  <div class="anIconClass">
3    <img src="/public/iconA.png" data-local-src="images/icon1.png" />
4  </div>
5  <div class="anotherClass">
6    <img src="../iconB.png" data-local-src="images/icon1-1.png" />
7  </div>
8  <div>
9    <img src="http://a.cdn.com/iconC.png" data-local-src="images/icon1-2.png" />
10  </div>
11</body>

After running it will be like this:

1<body>
2  <div class="anIconClass">
3    <img src="images/icon1.png" />
4  </div>
5  <div class="anotherClass">
6    <img src="images/icon1-1.png" />
7  </div>
8  <div>
9    <img src="http://a.cdn.com/icon1-2.png" />
10  </div>
11</body>

API

replace(options)

Options, Type: Object.

options.keepOrigin

Type:Boolean

Default:false

If the value is true, and the the "src" starts with "http:|ftp:|https:|//", then the new "src" is prepended to the origin "src".

options.sourceAttr

Type:String

Default:'data-local-src'

For added flexibility you can name any attribute here, whether it's a data- or alt or whatever you fancy. It's your code.

(Shout out to the maker of "gulp-replace-image-src" which was the basis for this tool)

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

10

License

Determines if the project has defined a license.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

SAST

Determines if the project uses static code analysis.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

Score

3

/10

Last Scanned on 2025-01-27

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More