Установка контейнера на ширину изображения не выполняется в IE 11 - PullRequest
0 голосов
/ 21 сентября 2018

В моем приложении есть внешний код 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

Возможно, у кого-то однажды была подобная проблема иможет указать мне в правильном направлении.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...