Question

好的，所以我知道这个问题已经被问过了，但是我正在尝试使用javascript通过更改src属性来将损坏的图像替换为具有不同尺寸的其他图像。这是我的代码的一部分：

MARKUP：

...
<img id="error-img" class="img-header" onerror="imgError(this);" alt="Header" src="images/header.png">
...

样式：

...
.img-header { width: 54px; height: 64px; }
...

JAVASCRIPT：

...
function imgError(image) {
image.onerror = "";
image.src = "/images/broken.png";
return true;
}
...

所以我需要的是在这个函数中包含一段代码，这样当图像被替换时，新图像的尺寸设置正确但不是54x64px。

修改

谢谢你的答案，但我忘了提及broken.png图片的大小：宽度：276像素高度：45像素。

Answer 1

...
function imgError(image) {
image.onerror = "";
image.src = "/images/broken.png";
// set width/height
image.style.width = "50px";
image.style.height = "50px";
// or add class name
image.className = "img-error";
return true;
}
...

CSS

...
.img-header { width: 54px; height: 64px; }
.img-error  { width: 40px; height: 40px; }
...

Answer 2

如果您希望替换图像具有自己的宽度/高度而不是从.image-header类继承，您有几个选项：

1）。 clear className：

image.className = '';

http://jsfiddle.net/gGP5D/

2）。添加新的类名：

function imgError(image) {
    image.onerror = "";
    image.src = "/images/broken.png";
    image.className += ' replacement-image';
}

http://jsfiddle.net/gGP5D/1/

如果新尺寸已知，则可以定义新尺寸，或将宽度和高度重置为auto值。

Answer 3

您可以执行以下操作将图像的CSS属性重置为错误图像的大小：

function imgError(image) {
  image.onerror = "";
  image.src = "/images/broken.png";
  elem.style.width = "100px"; //use whatever size the new image is here
  elem.style.height= "100px"; //use whatever size the new image is here
  return true;
}

替换损坏的图像并使用javascript调整错误图像的大小

3 个答案: