动态图像 ng-src 不会更改为缩小的图像名称
Dynamic image ng-src doesn't change to minified image name
我有两张图片,一个是绿色复选标记,一个是灰色复选标记。当用户选中或取消选中列表中的项目时,这些是 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 之外,模式不应该改变任何东西..
问题在于替换引用的 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']
]
}
}
如果您在 ngSrc 指令值的开头使用一些大括号。您必须在 Gruntfile 中使用上面的正则表达式。
/<img[^\>]*[^\>\S]+ng\-src=['"][\{\}\:\w\s]*([^'"\)#]+)(#.+)?["']/gm
我有两张图片,一个是绿色复选标记,一个是灰色复选标记。当用户选中或取消选中列表中的项目时,这些是 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 之外,模式不应该改变任何东西..
问题在于替换引用的 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']
]
}
}
如果您在 ngSrc 指令值的开头使用一些大括号。您必须在 Gruntfile 中使用上面的正则表达式。
/<img[^\>]*[^\>\S]+ng\-src=['"][\{\}\:\w\s]*([^'"\)#]+)(#.+)?["']/gm