我有两个图像,一个绿色复选标记和一个灰色复选标记。当用户选中或取消选中列表中的项目时,它们会显示/隐藏。我遇到的问题是,当使用 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: {
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
,然后抛出由于该文件不名为 vendor.js
,因此出现 404 not found
错误。是什么导致其他 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']
]
}
}
}
(受此启发 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']
]
}
}
关于angularjs - 动态图像 ng-src 不会更改为缩小图像名称,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29074894/