Skip to content
Replace the "src" attribute of <img> tags with specific path in HTML files.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
test
.gitignore
.travis.yml
LICENCE.md
README.md
index.js
package.json

README.md

gulp-replace-image-src Build Status

Replace the "src" attribute of <img> tags with specific path in HTML files.

It is very easy to replace original "src" with a CDN "src".

Installation

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

npm install --save-dev gulp-replace-image-src

Usage

var rep = require('gulp-replace-image-src');
var gulp = require('gulp');

gulp.task('replace', function() {
  gulp.src('*.html')
    .pipe(rep({
      prependSrc : '//github.cdn.com/images/',
      keepOrigin : false
    }))
    .pipe(gulp.dest('dist'));
});

The original HTML is like:

<body>
  <div class="icon1"><img src="/public/icon4.png" /></div>
  <div class="icon1_1"><img src="../icon4-1.png" /></div>
</body>

After replaced, it should be like:

<body>
  <div class="icon1"><img src="//github.cdn.com/images/icon4.png" /></div>
  <div class="icon1_1"><img src="//github.cdn.com/images/icon4-1.png" /></div>
</body>

The plugin only keeps the original file name in the new path.

If you want to keep origin "src", then you can make keepOrigin true.

var rep = require('gulp-replace-image-src');
var gulp = require('gulp');

gulp.task('replace', function() {
  gulp.src('*.html')
    .pipe(rep({
      prependSrc : '//github.cdn.com/images',
      keepOrigin : true
    }))
    .pipe(gulp.dest('dist'));
});

Then you will see the below HTML:

<body>
  <div class="icon1"><img src="//github.cdn.com/images/public/icon4.png" /></div>
  <div class="icon1_1"><img src="//github.cdn.com/images/../icon4-1.png" /></div>
</body>

If the "src" starts with "http:|ftp:|https:|//", then it will NOT be replaced.

API

replace(options)

Options, Type: Object.

options.prependSrc

Type:String

Default: /

Prepend the path string to every "src" attribute of "img" tag.

options.keepOrigin

Type:Boolean

Default:false

If the value is true, then the new "src" is prepended to the origin "src".

You can’t perform that action at this time.