ng-src get ignored to replace image source

[nobalmohan]

I use ng-src for angular UI bootstrap carousel and found that ng-src in img tag ( img ng-src=" " ) get ignored by usemin to replace its respective compressed images.

Though angular UI bootstrap carousel works with "src". Reporting this use-case.

[sindresorhus]

That's a non-standard attribute. It would have to be added here: https://github.com/yeoman/grunt-usemin/blob/547310075dbf1f33ab79e756a2c127b0602d1155/lib/fileprocessor.js#L8

PR welcome (with unit test).

[pasupulaphani]

I tried some regex but no luck

[stephanebachelier]

@pasupulaphani you should be able to tell usemin by using patterns options.

usemin: {
  js: '*.js',
  options: {
    patterns: {
      js: [
        [/<img[^\>]*[^\>\S]+ng-src=['"]([^'"\)#]+)(#.+)?["']/gm, 'Update the HTML with non standard ng-src attribute on img']
      ]
    }
  }
}

[stephanebachelier]

Tagging as doc as it should be added to a documentation

[stephanebachelier]

@pasupulaphani coming back to you with the attribute ng-src.

Have you tried the configuration I gave you ?

Digging into AngularJS doc I've found that your are using ngSrc directive. What I understand is that your url might be dynamic URL, something like:

<img ng-src="http://www.gravatar.com/avatar/{{hash}}" alt="Description" />

When AngularJS will replace the hash with it's value, the request will be fetched.

I'll end with a question: is usemin process running while the url is known or while still parameterized ?

[chriseyhorn]

Using ng-src for static images is very common in the Angular world. In addition, libraries like Angular Material commonly use a directive attribute like md-svg-src as the source of the svg image. The ideal fix for this is to have a config that allows the user to input the tags to look for without having to write (in my opinion) complicated regex expressions that have been shared in various SO posts. Another option is to read all the image names in the images directory structure and do a direct search and replace with the renamed version.

This issue is a real blocker for Angular Grunt users as I personally have spent many hours tracking down what is actually causing my images to not load.

[leolux]

ng-source still gets ignored, even with the custom pattern suggested by stephanebachelier. Btw, it should be an html pattern an not js.

[Darksoulsong]

This is still happening to angular-material elements, md-svg-src="assets/images/chat.svg", for example.: