Replacing a broken image and resizing the error image with javascript

Question

OK so I know this question has been asked separetly but I'm trying to use javascript to replace a broken image with another image with DIFFERENT dimensions by changing th src attribute. Here's a part of my code:

MARKUP:

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

STYLES:

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

JAVASCRIPT:

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

So what I need is to include a piece of code in this function so that when the image gets replaced the new image has it's dimensions set correctly but not 54x64px.

EDIT:

Thank you for the answers guys but I've forgot to mention the size of the broken.png image: Width: 276px Height: 45px.

So replace the values in below answer with those values and it will work... — Asons
– Asons, Commented Feb 27, 2014 at 18:50
Yeah I know I just wanted to help future visitors understand the question better. — user3188159
– user3188159, Commented Feb 27, 2014 at 18:59

Asons · Accepted Answer · 2019-10-08 19:17:24Z

3

For that you can use image.style to set a width or height, or image.className to assign it a class.

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

edited Oct 8, 2019 at 19:17

answered Feb 27, 2014 at 18:37

Asons

87.7k12 gold badges119 silver badges175 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

dfsq · Accepted Answer · 2014-02-27 18:42:42Z

1

If you want replacement image to have it's own width/height and not inherited from .image-header class, you have couple options:

1). clear className:

image.className = '';

http://jsfiddle.net/gGP5D/

2). add new class name:

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

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

This new class name could define new dimensions if they are known, or reset width and height to auto values.

answered Feb 27, 2014 at 18:42

dfsq

193k26 gold badges244 silver badges261 bronze badges

2 Comments

Asons Over a year ago

Just out of curiosity, as I already added the answer to change class name much earlier than you, why did you add one more answer targeting the same property/solution?

dfsq Over a year ago

Oh, I didn't see it, just saw that you propose changing style.width.

Dryden Long · Accepted Answer · 2014-02-27 18:38:42Z

0

You can do the following to reset the image's CSS properties to whatever size your error image is:

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;
}

answered Feb 27, 2014 at 18:38

Dryden Long

10.2k2 gold badges38 silver badges48 bronze badges

1 Comment

Asons Over a year ago

You can use elem.style - you need to change to image.style

Collectives™ on Stack Overflow

Replacing a broken image and resizing the error image with javascript

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related