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

好的，我知道这个问题已经被单独问过了，但我正试图使用javascript通过更改th

src

属性，用另一个不同维度的图像替换一个损坏的图像。以下是我代码的一部分：

标记：

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

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

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

JAVASCRIPT:

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

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

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

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

编辑：

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

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

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

谢谢你们的回答，伙计们，但我忘了提到破碎的.png图像的大小：

---

宽度：276px高度：45px

为此，您可以使用

image.style

设置宽度或高度，或者使用

image.className

为其指定一个类

...
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

---

可以执行以下操作将图像的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;
}

---

如果希望替换图像具有自己的宽度/高度，而不是继承自

.image header

类，则有两个选项：

1） 。清除类名：

image.className = '';

2） 。添加新类名：

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

---

这个新的类名可以定义新的维度（如果已知的话），或者将宽度和高度重置为

auto

值。

所以用这些值替换下面答案中的值，它就会起作用……是的，我知道我只是想帮助未来的访问者更好地理解这个问题。只是出于好奇，由于我已经比您更早地添加了更改类名的答案，为什么您还要针对同一属性/解决方案添加一个答案？哦，我没有看到，只是看到您建议更改

style.width

。您可以使用

elem.style

-您需要更改为

image.style