В моем приложении есть внешний код Javascript / JQuery, который обрабатывает механизм загрузки изображений.Поэтому, когда я нажимаю кнопку «reimport image», открывается сайт, где я должен увидеть уже загруженное изображение в контейнере с рамкой вокруг него.Размер контейнера устанавливается по ширине изображения и по высоте автоматически.
Со вчерашнего дня это больше не работает в IE.Контейнер имеет ширину 0 и высоту 0. Поэтому я вижу только границу в виде маленького прямоугольника.
Я сузил это до части, где я думаю, что это не так в коде, но я не совсем уверен, понимаю ли я, что здесь происходит.Это отрывок из кода, слегка измененный, поэтому я могу запустить его автономно в браузере.
var file = 'some_image_name.jpg?1537512772'; // this is a string in the original code, that points to a picture
var image = new Image();
console.log('image ', image);
image.className = "dnd-preview";
image.addEventListener("load", function (event) {
console.log('image.width ', image.width);
console.log('image.height ', image.height);
$(holder).width(image.width);
$(holder).height("auto");
$(loader).hide();
console.log('width and height of holder set inside eventListener ');
console.log('width: ' , $(holder).width());
console.log('height: ' , $(holder).height());
});
document.querySelector('.container').appendChild(image);
console.log('file instanceof File ', (file instanceof File));
console.log('typeof file === string', (typeof file === 'string'));
if(!(file instanceof File) && typeof file === 'string'){
console.log('image.src set ' + file);
image.src = file;
console.log('image ' , image);
console.log('image.width ', image.width);
console.log('image.height ', image.height);
return;
}
Когда EventListener запущен, я вижу в журнале, что для изображения установлено значение 0 width,но только в IE.FF и Chrome устанавливают правильную ширину.
Это журнал, который я получаю от IE:
file instanceof File false
typeof file === string true
image.src set some_image_name.jpg?1537512772
image [object HTMLImageElement]
"image "
<img class="dnd-preview" src="some_image_name.jpg?1537512772"></img>
image.width 0
image.height 0
image.width 0
image.height 0
width and height of holder set inside eventListener
width 0
height 0
Это журнал, который я получаю от Chrome:
file instanceof File false
typeof file === string true
image.src set some_image_name.jpg?1537512772
image [object HTMLImageElement]
"image "
<img class="dnd-preview" src="some_image_name.jpg?1537512772"></img>
image.width 0
image.height 0
image.width 400
image.height 175
width and height of holder set inside eventListener
width 400
height 175
Возможно, у кого-то однажды была подобная проблема иможет указать мне в правильном направлении.