[英]Change image source according to screen size via data attribute in angular js
我们如何根据角度js中的屏幕大小通过数据属性更改图像源。 请在角度js中建议适当的方法。
<img src="abc.jpg" data-desktop="abc.jpg" data-tablet="xyz.png" data-mobile="bcd.jpg" >
您可以使用自定义指令实现此目的。 见工作人员: http ://plnkr.co/edit/7oVbjaK0QQPHGjyWzfrA?p=preview
HTML:
<img src="default.jpg" small="small.jpg" big="big.jpg" change-on-screen-resize />
指示:
app.directive("changeOnScreenResize", ["$window", function($window) {
return {
restrict: 'A',
link: function(scope, elem, attrs) {
$window.onresize = function() {
changeImage();
scope.$apply();
}
//no such method 'on' for $window
//$window.on('resize', function(){
//});
changeImage();
function changeImage() {
var screenWidth = $window.innerWidth;
if(screenWidth <= 400) {
//attrs.src = attrs.small;
elem.attr('src', attrs.small);
} else {
elem.attr('src', attrs.big);
}
}
}
};
}])
您可以使用ng-src = someFunctionInYourController()返回相应的图像文件名,而不是使用src =“...”。
如果您使用的是Bootstrap,Angular Material等,则可以使用指令根据媒体查询显示内容。 此外,AngularMaterial还提供$ mdMedia服务,可以帮助您解决此问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.