Question

在我的应用程序中，有处理图像上传机制的外部Javascript / JQuery代码。因此，当我单击“重新导入图像”按钮时，将打开一个站点，在该站点中应该可以在容器中带有边框的地方看到已经上传的图片。容器的大小设置为图像的宽度和高度自动。

从昨天开始，这在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宽度，但仅在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

也许有人曾经遇到过类似的问题，可以指出正确的方向。

在IE 11中将容器设置为图像宽度失败

0 个答案: