Inject/transform image paths?

[mdjasper]

Is it possible to use gulp-inject to rewrite image paths? I am using gulp-inject to modify the paths of css files to replace the domain for local vs test environments like so:

<!-- inject:css -->
    <link rel="stylesheet" href="http://local.mycdn.org/my-file-path/app.css">
<!-- endinject -->

//...
.pipe(inject(css, {addPrefix: cdnPrefix, addRootSlash: false}))

This transforms the css file to:

<link rel="stylesheet" href="http://test.mycdn.org/my-file-path/app.css">

I am attempting to use this same method to rewrite the paths of image files using the options.name property, like so:

<!-- inject:images -->
    <link rel="apple-touch-icon" href="http://local.mycdn.org/my-icon.png">
    <link rel="apple-touch-icon" sizes="76x76" href="http://local.mycdn.org/my-icon-76x76.png">
<!-- endinject -->

//...
.pipe(inject(css, {addPrefix: cdnPrefix, addRootSlash: false}, {name: 'images'}))

However the image tags in this region are not being transformed. In reading through the documentation, I have only seen examples using JavaScript and CSS files... Is this part of gulp-inject, or should it be able to handle any filetype? If so, is there documentation around injecting/transforming file paths like I am attempting?

[mdjasper]

Tagging @ChidoYo

[joakimbeng]

If all your images are png's you should be able to do it like this:

<!-- inject:png -->
    <link rel="apple-touch-icon" href="http://local.mycdn.org/my-icon.png">
    <link rel="apple-touch-icon" sizes="76x76" href="http://local.mycdn.org/my-icon-76x76.png">
<!-- endinject -->

.pipe(inject(images, {
  addPrefix: cdnPrefix,
  addRootSlash: false,
  transform(filepath) {
    return `<link rel="apple-touch-icon" href="${filepath}">`;
  }
}))

To be able to have different attributes (i.e. sized="76x76" in your example) you have to write an ugly if in the transform function...