动态图像 ng-src 不会更改为缩小的图像名称

Question

我有两张图片，一个是绿色复选标记，一个是灰色复选标记。当用户选中或取消选中列表中的项目时，这些是 shown/hidden。我遇到的问题是，当使用 grunt-contrib-imagemin 缩小应用程序的图像时，这两张图像 ng-src 不会更改为缩小后的图像名称。知道为什么会发生这种情况以及如何解决它吗？

<img ng-if="item.checkedState === 'unchecked'" ng-src="images/unchecked.png" ng-click="changeCheckedState(item)">
<img ng-if="item.checkedState === 'checked'" ng-src="images/checked.png" ng-click="changeCheckedState(item)">

我的 usemin 任务：

usemin: {
  html: ['<%= yeoman.dist %>/{,*/}*.html'],
  css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
  options: {
    assetsDirs: ['<%= yeoman.dist %>','<%= yeoman.dist %>/images']
  }
}

编辑： 通过测试@Tony Barnes 解决方案：

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

脚本和样式的其他 src 名称失败，即文件 vendors132918.js 在 src 中变为 vendor.js 然后抛出 404 not found 错误，因为文件是' 称为 vendor.js。是什么导致其他 src 在这里失败？据我所知，除了图像上的 src 之外，模式不应该改变任何东西..

Answer 1

问题在于替换引用的 grunt-usemin 任务。默认情况下，ng-src 被 usemin 忽略。

如果包含此 html 模式，ng-src 引用将被正确替换。

usemin: {
  options: {
    patterns: {
      html: [

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

      ]
    }
  }
}

（受此启发recent commit）

但是， 这会破坏对样式和脚本的其他引用。似乎其他默认 usemin 模式已被上述添加覆盖。

要使这一切正常工作，您需要结合上述模式和 usemin:

中的默认模式

options: {
    assetsDirs: ['<%= yeoman.dist %>', '<%= yeoman.dist %>/images'],
    patterns: {
      html: [
         [/(images\/.*?\.(?:gif|jpeg|jpg|png|webp|svg))/gm,
         'Update the angular directives that ref revved images'],

         //defaults from node module
         [ /<script.+src=['"]([^"']+)["']/gm,
         'Update the HTML to reference our concat/min/revved script files'
         ],
         [ /<link[^\>]+href=['"]([^"']+)["']/gm,
         'Update the HTML with the new css filenames'
         ],
         [ /<img[^\>]+src=['"]([^"']+)["']/gm,
         'Update the HTML with the new img filenames'
         ],
         [ /data-main\s*=['"]([^"']+)['"]/gm,
         'Update the HTML with data-main tags',
         function (m) { return m.match(/\.js$/) ? m : m + '.js'; },
         function (m) { return m.replace('.js', ''); }
         ],
         [ /data-(?!main).[^=]+=['"]([^'"]+)['"]/gm,
         'Update the HTML with data-* tags'
         ],
         [ /url\(\s*['"]([^"']+)["']\s*\)/gm,
         'Update the HTML with background imgs, case there is some inline style'
         ],
         [ /<a[^\>]+href=['"]([^"']+)["']/gm,
         'Update the HTML with anchors images'
         ],
         [/<input[^\>]+src=['"]([^"']+)["']/gm,
         'Update the HTML with reference in input'
         ]
       ],
      js: [
          [/(images\/.*?\.(?:gif|jpeg|jpg|png|webp|svg))/gm, 
          'Update the JS to reference our revved images']
      ]
    }
  }

Answer 2

如果您在 ngSrc 指令值的开头使用一些大括号。您必须在 Gruntfile 中使用上面的正则表达式。

/<img[^\>]*[^\>\S]+ng\-src=['"][\{\}\:\w\s]*([^'"\)#]+)(#.+)?["']/gm

动态图像 ng-src 不会更改为缩小的图像名称

Dynamic image ng-src doesn't change to minified image name

angularjs

gruntjs

minify

grunt-usemin

grunt-contrib-imagemin