[英]IE 11 bungles placement of </img> tag in DOM with Cloudinary AngularJS Directive
I am using the official Cloudinary AngularJS directive to place images on my site. 我正在使用官方的Cloudinary AngularJS指令在我的网站上放置图片。 However, Chrome and IE 11 are behaving differently in terms of where they place a closing
</img>
tag. 但是,Chrome和IE 11在放置结束标记
</img>
方面的行为有所不同。 IE places it just before the parent element closes and Chrome properly places it after the transcluded element. IE会将其放置在父元素关闭之前,而Chrome则会将其正确放置在被包含元素之后。
Here are snippets of the relevant Cloudinary directives (from their official plugin): 以下是相关Cloudinary指令的摘录(来自其官方插件):
angularModule.directive('clTransformation', function() {
return {
restrict : 'E',
transclude : false,
require: '^clImage',
link : function (scope, element, attrs, clImageCtrl) {
var attributes = {};
$.each(attrs, function(name,value){
if (name[0] !== '$') {
attributes[cloudinaryAttr(name)] = value;
}
});
clImageCtrl.addTransformation(attributes);
}
}
});
angularModule.directive('clImage', function() {
return {
restrict : 'E',
replace: true,
transclude : true,
template: "<img ng-transclude/>",
scope: {},
priority: 99,
controller: function($scope) {
this.addTransformation = function(ts){
$scope.transformations = $scope.transformations || [];
$scope.transformations.push(ts);
}
},
...
I've implemented these in my site with: 我已经在我的网站中实现了这些功能:
<figure>
<cl-image
ng-repeat='image in images'
public_id='{{image.public_id}}'
format='jpg'>
<cl-transformation
height='{{imgHeight}}'
width='{{imgWidth}}'
crop='{{crop}}'>
</cl-image>
<a href='' ...></a>
<a href='' ...'></a>
<div class='nav'>
<div class='wrapper'>
<ul>
<li>
<a href='' ...></a>
</li>
...
</ul>
</div>
</div>
<figcaption><{{description}}></figcaption>
</figure>
Opening the site in Chrome , the DOM gets updated as 在Chrome中打开网站,DOM更新为
<figure>
<img ng-transclude="" public_id="wide/image1" format="jpg" src="http://res.cloudinary.com/<account id>/image/upload/c_fill,h_370,w_1130/v1/wide/image1.jpg">
<cl-transformation height="370" width="1130" crop="fill" class="ng-scope">
</cl-transformation>
</img> <!---------------- img close tag is here ---------------------->
<img ...>
...
</img>
<a href='' ...></a>
<a href='' ...></a>
...
</figure>
However, in IE , the DOM gets updated as: 但是, 在IE中 ,DOM更新为:
<figure>
<img ng-transclude="" public_id="wide/image1" format="jpg" src="http://res.cloudinary.com/<account id>/image/upload/a_exif,c_fill,g_center,h_370,w_1130/v1/wide/image1.jpg">
<cl-transformation height="370" width="1130" crop="fill" class="ng-scope">
</cl-transformation>
<a href='' ...></a>
<a href='' ...></a>
<div class='nav'>
<div class='wrapper'>
<ul>
<li>
<a href='' ...></a>
</li>
...
</ul>
</div>
</div>
<figcaption><{{description}}></figcaption>
</img> <!---------------- img close tag is here :( ---------------------->
<img ...>
...
</img>
</figure>
This causes all of the <a>
, <div>
, <ul>
, <li>
, <figcaption>
tags to not be rendered. 这将导致所有
<a>
, <div>
, <ul>
, <li>
和<figcaption>
标签都无法呈现。
I've tried changing the clImage
directive to use a template like <img ng-transclude></img>
but I get the same results. 我尝试将
clImage
指令更改为使用<img ng-transclude></img>
类的模板,但得到的结果相同。 What is happening to the </img>
tag in IE and how can I resolve this? IE中的
</img>
标记发生了什么,该如何解决?
For non-chained transformations like the one you have shown putting the transformation parameters on the image tag itself should do the trick. 对于像您展示的那样的非链式转换,应该将转换参数放在image标签本身上可以解决问题。 In this case:
在这种情况下:
<cl-image
ng-repeat='image in images'
public_id='{{image.public_id}}'
height='{{imgHeight}}'
width='{{imgWidth}}'
crop='{{crop}}'
format='jpg'>
If you ever need to have chained transformations and would like to avoid using the internal transformation tags you can instead use the raw-transformation
attribute on the cl-image
tag: 如果您需要链式转换,并且希望避免使用内部转换标签,则可以在
cl-image
标记上使用raw-transformation
属性:
<cl-image
ng-repeat='image in images'
public_id='{{image.public_id}}'
raw-transformation='c_crop,h_100,w_150/a_45'
format='jpg'>
The above example chains another rotation of 45 degrees on top of the cropping transformation found before. 上面的示例在之前发现的裁剪转换的顶部链接了另一个45度旋转。
Have a look in the sample project for a variety of image tag examples. 在示例项目中查看各种图像标签示例。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.