Support "srcset" attribute for image tag

README.md

@@ -4,7 +4,7 @@ Puts HTML partials in the Angular's $templateCache so directives can use templat
 
 ## Webpack and loaders
 
-Webpack is the [webpack](http://webpack.github.io/) and it's module bundler. [Loaders](http://webpack.github.io/docs/using-loaders.html) wrap content in the javascript code that executes in the browser. 
+Webpack is the [webpack](http://webpack.github.io/) and it's module bundler. [Loaders](http://webpack.github.io/docs/using-loaders.html) wrap content in the javascript code that executes in the browser.
 
 # Install
 
@@ -21,7 +21,7 @@ require('ng-cache!./demo/template/myPartial.html');
 Partial will be available as `ng-include="'myPartial.html'"`
 or `templateUrl: 'myPartial.html'`.
 
-Note that the inline require syntax is used in examples for simplicity. 
+Note that the inline require syntax is used in examples for simplicity.
 It's recommended to use webpack [config](#webpack-config).
 
 ## Named templates
@@ -81,21 +81,21 @@ or retrieve the real directory name (use `*` or `[dir]`):
 
 ``` javascript
 require('ng-cache?prefix=public/*/templates!./path/to/myPartial.html')
-// => ng-include="'public/path/templates/myPartial.html'" 
+// => ng-include="'public/path/templates/myPartial.html'"
 ```
 
 Prefix can strip the real directory name (use `//`):
 
 ``` javascript
 require('ng-cache?prefix=public/*//*/templates!./far/far/away/path/to/myPartial.html')
-// => ng-include="'public/far/path/templates/myPartial.html'" 
+// => ng-include="'public/far/path/templates/myPartial.html'"
 ```
 
 Prefix can be extended through a directory tree (use `**` or `[dirs]`). See the next section.
 
 ## Root
 
-You can specify root directory for templates separated by a colon `prefix=root:**`. 
+You can specify root directory for templates separated by a colon `prefix=root:**`.
 It is enough to specify a single directory name. Prefix counts real template path from right to left and takes first (rightmost) occurance of the root directory.
 
 ```
@@ -121,19 +121,19 @@ It is also possible to combine wildcards in prefix, i.e. `prefix=packman:**/tmpl
 Use `name` query parameter to strip file extension or add suffix:
 
 ``` javascript
-// 
+//
 require('ng-cache?name=[name].tpl!./field.html')
 // => ng-include="'field.tpl'"
 
 require('ng-cache?name=[name]-foo.[ext]!./field.html')
 // => ng-include="'field-foo.html'"
 ```
- 
+
 Note. File extension are defined as any char sequence after the last `.`.
 
 ## Module
 
-By default, templates will be added to the default AngularJS 'ng' module run() method. 
+By default, templates will be added to the default AngularJS 'ng' module run() method.
 Use this parameter to use a different module name:
 
 ``` javascript
@@ -151,13 +151,13 @@ require('ng-cache?module=moduleName.[root]&prefix=packs:**!./packs/path/to/myPar
 In such query `[root]` means that first part of `templateId` *(here it is `path/to/myPartial.html`)* will be stripped out and placed as a part of `moduleId`.
 
 In current example resulting values:
-- `moduleId`: `"moduleName.path"` 
-- `templateId`: `"to/myPartial.html"` 
+- `moduleId`: `"moduleName.path"`
+- `templateId`: `"to/myPartial.html"`
 
 Useful in case you want save few bytes.
 
 ## Template id
- 
+
 To obtain template id use `exportIdOnly` query parameter. Loader exports `id` of a template.
 
 ```javascript
@@ -191,7 +191,7 @@ module: {
 }
 ```
 
-Note that the inline require syntax is used in examples for simplicity. It's recommended to use webpack config. 
+Note that the inline require syntax is used in examples for simplicity. It's recommended to use webpack config.
 Please see this [comment](https://github.com/webpack/webpack/issues/1626#issuecomment-156758230)
 and the [manual](https://webpack.github.io/docs/using-loaders.html#loaders-in-require).
 
@@ -272,6 +272,8 @@ To switch off url resolving use `-url` query param:
 require('ng-cache?-url!./myPartial.html')
 ```
 
+Supported attributes: `src`, `srcset`, `md-svg-src`.
+
 # License
 
 MIT (http://www.opensource.org/licenses/mit-license.php)

lib/urlParser.js

@@ -10,15 +10,15 @@ Parser = new Parser({
         '<[^\\s/>]+': 'tag',
     },
     tag: {
-        '[\\s\\n](md-svg-)?src[\\s\\n]*=[\\s\\n]*[\'"]': 'srcAttr',
+        '[\\s\\n](md-svg-)?src(set)?[\\s\\n]*=[\\s\\n]*[\'"]': 'srcAttr',
         '>': 'root',
     },
     srcAttr: {
-        '[^\'"]+': function(match, idx) {
+        '[^\\s\\n\'",]+': function(match, idx) {
             if (relativeImageUrl.test(match)) {
                 this.urls.push({idx: idx, path: match});
             }
-            return 'tag';
+            return 'srcAttr';
         },
         '[\'"]': 'tag',
     },

package.json

@@ -23,7 +23,9 @@
     "chai": "^3.2.0",
     "eslint": "^2.13.1",
     "eslint-config-google": "^0.6.0",
+    "file-loader": "^2.0.0",
     "mocha": "^2.3.0",
+    "url-loader": "^1.1.2",
     "webpack": "^2.4.1"
   },
   "dependencies": {

test/src/template.html

@@ -25,4 +25,15 @@ <h2>Second View</h2>
 
 <script type="text/ng-template">
     <div class="view"></div>
+</script>
+
+<script type="text/ng-template" id="myTemplateWithImage">
+    <img src="../public/AngularJS-small.png"></div>
+    <img
+        src="../public/AngularJS-small.png"
+        srcset="
+            ../public/AngularJS-small.png 1x,
+            ../public/AngularJS-large.png 2x
+        "
+    ></div>
 </script>

test/webpack.config.js

@@ -24,6 +24,10 @@ module.exports = {
                 loader: '../index.js?prefix=grot/[dir]//[dir]//tmpl&module=appModule&name=[name].tpl&-exportId' +
                     '&minimizeOptions=' + minimizeOptions + '&conservativeCollapse',
             },
+            {
+                test: /\.(png|bmp|raw|jpg|jpeg|tiff|gif|svg)$/,
+                loader: 'url-loader?limit=10240',
+            },
         ],
     },
 };

test/webpack2.config.js

@@ -28,6 +28,14 @@ module.exports = {
                     },
                 },
             }],
+        },{
+            test: /\.(png|bmp|raw|jpg|jpeg|tiff|gif|svg)$/,
+            use: [{
+                loader: 'url-loader',
+                options: {
+                    limit: 10240,
+                }
+            }]
         }],
     },
 };