I am using the official Cloudinary AngularJS directive to place images on my site. However, Chrome and IE 11 are behaving differently in terms of where they place a closing </img>
tag. IE places it just before the parent element closes and Chrome properly places it after the transcluded element.
Here are snippets of the relevant Cloudinary directives (from their official plugin):
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
<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:
<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.
I've tried changing the clImage
directive to use a template like <img ng-transclude></img>
but I get the same results. What is happening to the </img>
tag in IE and how can I resolve this?
For non-chained transformations like the one you have shown putting the transformation parameters on the image tag itself should do the trick. 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
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.
Have a look in the sample project for a variety of image tag examples.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.