Prevent alt text of an img tag from being rotated when the image is not found

Question

I have applied transform: rotate(90deg); CSS on my image, but it is also rotating ALT text, which is causing this text to appear over other image whenever image is not found.

Is there any why in which I can prevent ALT text from getting rotated?

<div>
<img style="transform: rotate(90deg);" alt="User Name" src="http://ImageURL">
</div>

div { margin-top:50px; }

<div>
    <img style="transform: rotate(90deg);" alt="User Name" src="http://ImageURL">
    </div>

EDIT

I am having a lot of images on the page.

score 4 · Accepted Answer · answered May 11 '18 at 06:03

4

You can use the onerror handler to remove the styles from your image:

function onImageNotFound() {
  document.getElementById('imgTest').style.transform = 'none';
}

div { margin-top:50px; }

<div>
    <img id="imgTest" style="transform: rotate(90deg);" alt="User Name" src="http://ImageURL" onerror="onImageNotFound();">
</div>

And here is an inline version:

div { margin-top:50px; }

<div>
    <img style="transform: rotate(90deg);" alt="User Name" src="http://ImageURL" onerror="this.style.transform = 'none';">
</div>

answered May 11 '18 at 06:03

klugjo

19,422
8
57
75

This is a fun idea but the alt text may also be displayed when an image is slow to fetch or render. I'd rather use the onerror callback to *add* the alternative text (as a rich element). – Denys Séguret May 11 '18 at 06:08
That's not the most usual case but it happens and that's how it's designed. See [the MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img): "or if the image is not yet downloaded" – Denys Séguret May 11 '18 at 06:12
@klugjo thanks for the response, but MDN article say "not to use onerror method" ... Should I go with it ? – nbi May 11 '18 at 06:22
@nbi https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/image I don't see anything in MDN – klugjo May 11 '18 at 06:59
@klugjo [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Browser_compatibility](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Browser_compatibility) – nbi May 11 '18 at 07:20
You are right. As of now I don't know any other solution though .. https://stackoverflow.com/questions/92720/jquery-javascript-to-replace-broken-images. What I did seems to be what everybody else does as well. You could look at jQuery – klugjo May 11 '18 at 07:49

score 2 · Answer 2 · answered May 11 '18 at 06:27

The best solution is probably to apply the transformation only on loaded images:

for (let img of document.querySelectorAll("img")) {
  img.addEventListener("load", function(){
    this.classList.add("rotated");
  });
}

div { margin-top:50px; }
.rotated { transform: rotate(90deg); }

<div>
    <img alt="User Name" src="http://ImageURL">
</div>
<div>
    <img alt="User Name" src="https://dystroy.org/spacebullet-48.png">
</div>

score 2 · Answer 3 · answered May 11 '18 at 06:33

If you are only applying the effect to one (small) image you could do something like this with CSS.

Place a non-rotated copy of the image behind the rotated image. If the image loads, the rotated version will show. If it fails, the alt text of the non-rotated version will show.

div {
  margin-bottom: 50px;
  border: 1px solid red;
  position: relative;
  /* hide the broken image icon */
  overflow: hidden;
}

img {
  display: inline-block;
  vertical-align: bottom;
}

.img-rotate {
  transform: rotate(90deg);
  /* hide the alt text */
  color: transparent;
}

.img-copy {
  position: absolute;
  left: 0;
  z-index: -1;
}

<p>Broken image link</p>
<div>
  <img class="img-rotate" alt="User Name" src="http://ImageURL">
  <img class="img-copy" alt="User Name" src="http://ImageURL">
</div>

<p>Working image link</p>
<div>

  <img class="img-rotate" alt="User Name" src="https://unsplash.it/200">
  <img class="img-copy" alt="User Name" src="https://unsplash.it/200">
</div>

This should be the same on big images: they're cached anyway so this shouldn't be a burden for the browser. — Denys Séguret, May 11 '18 at 07:02
@DenysSéguret so browser will make only one call for two or more element having same src attribute? — nbi, May 11 '18 at 07:23
@nbi right. The DOM is still a little heavy but this looks like a fine solution if you can't use javascript's onload event handler. — Denys Séguret, May 11 '18 at 07:36

Prevent alt text of an img tag from being rotated when the image is not found

3 Answers3