Angularjs 动态图像ng src不';t更改为缩小图像名称

Angularjs 动态图像ng src不';t更改为缩小图像名称,angularjs,gruntjs,minify,grunt-usemin,grunt-contrib-imagemin,Angularjs,Gruntjs,Minify,Grunt Usemin,Grunt Contrib Imagemin,我有两个图像,一个绿色的复选标记和一个灰色的复选标记。当用户选中或取消选中列表中的项目时,这些选项将显示/隐藏。我遇到的问题是,当使用grunt contrib imagemin缩小应用程序的图像时,这两个图像ng src不会更改为缩小后的图像名称。你知道为什么会发生这种情况以及如何解决吗 <img ng-if="item.checkedState === 'unchecked'" ng-src="images/unchecked.png" ng-click="changeCheckedS

我有两个图像,一个绿色的复选标记和一个灰色的复选标记。当用户选中或取消选中列表中的项目时,这些选项将显示/隐藏。我遇到的问题是,当使用
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']
  }
}
usemin:{
html:['/{,*/}*.html'],
css:['/styles/{,*/}*.css'],
选项:{
资产目录:['',/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']
    ]
    }
  }
}
usemin:{
html:['/{,*/}*.html'],
css:['/styles/{,*/}*.css'],
选项:{
资产目录:['',/images'],
模式:{
html:[
[/

脚本和样式的其他src名称失败,即文件
vendors132918.js
src
中变成
vendors132918.js
,然后抛出
404notfound
错误,因为该文件未被称为
vendors132918.js
。是什么原因导致另一个
src
在这里失败?模式不应该改变就我所见,除了图像上的src之外,问题在于替换引用的
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']

      ]
    }
  }
}

如果在ngSrc指令值的开头使用一些花括号,则必须在Grunfile中使用上面的正则表达式


/看起来图像将缩小,因为
imagemin
正在查看
images/
目录中的所有内容。您确定它们不在该目录中吗?根据您的设置,缩小后,可能会重命名图像,并且不会用新文件名更新您的
ng src
。@TonyBarnes All-imag在那里,图像本身正在缩小,但源没有变为缩小的图像。也许我有点不清楚。你的grunt设置中有usemin任务吗?缩小后其他图像是否在HTML中重命名?@TonyBarnes是的,是的,其他图像缩小并相应地重命名其源。但是一旦我如果使用ng if或ng show/hide,则不起作用。有趣的是,您可以发布您的usemin任务吗?我尝试按照您的建议添加模式,但收到警告:“不支持的模式:模式”。我还发布了我的原始usemin。@Chrillewoodz抱歉,模式应该在
选项中更新。我希望它能工作!似乎这个模式会导致所有脚本和样式重写失败,因为我在尝试加载包含解决方案的资源时遇到一系列404错误。知道为什么吗?我不确定hand-稍后我将讨论重新创建问题:)@Chrillewoodz我复制并解决了问题-请参阅更新的答案。
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']
      ]
    }
  }