Is there a way to hide an "Image not found" error icon without "this.style.display =-CodePudding

I'm trying to have multiple image boxes in a span, with no pre-determined src. This is for a basic game of blackjack as a task I have set myself to do in JavaScript. Currently, here is my HTML code for the span of image boxes.

This site is not being hosted, I'm running it via my browser; no JQuery

<span> <!-- Players Cards -->
    <img class='imagebox' id='imagebox1' src=''></img>
    <img class='imagebox' id='imagebox2' src=''></img>
    <img class='imagebox' id='imagebox3' src=''></img>
    <img class='imagebox' id='imagebox4' src=''></img>
</span>

In my JavaScript file, after a card has been selected, I use interpolation to get an image. It will be dealt by changing image.src as shown:

function deal(box) {
  let card = randomcard()
  const image = document.getElementById(`imagebox${box}`)
  if (image.src !== card) {
    image.src = `cardpng/${card}`
  }else {
    redeal()
  }
}

My issue is that, since no src has been defined for each image box, until it has been assigned a src, it will have an "image not found" icon, which for aesthetic purposes I'd like to remove.

I tried:

<img class='imagebox' id='imagebox1' one rror='this.style.display = "none"' src=''></img>

However, in doing so, this.style.display remains as "none", even after a src is defined and there should be no error.

I understand I could just write a function once a card has been dealt to change it back, however I'm looking for something prettier which will be easier and less communication between HTML and JS.

Thanks in advance for replies.

CodePudding user response：

A solution that would work even for actually broken images, and not just for the ones you haven't set their src yet, is to set the alt attribute to the empty string:

<section>
  <p>With <code>alt=""</code></p>
  <img alt="">
  <img alt="" src="">
  <img alt="" src="https://example.com/broken-image.jpg">
  <img alt="" src="https://www.fillmurray.com/50/50">
</section>
<section>
  <p>Without</p>
  <img>
  <img src="">
  <img src="https://example.com/broken-image.jpg">
  <img src="https://www.fillmurray.com/50/50">
</section>

However beware that with this solution your images are converted to empty text nodes for the renderer, which don't take any space, but which make the neighbor white spaces get rendered. So for instance in the above example, the new lines between each <img> tags are visible as a single space text node in the rendered page, just like they are when the images are rendered.
However this is an issue only when the images are presented inline like here.

CodePudding user response：

Use CSS

img[src=""] {
  display: none;
}

Like this -

setTimeout(() => document.getElementById('imagebox1').src = "image.jpg", 2000)

img[src=""] {
  display: none;
}

<span> <!-- Players Cards -->
    <img class='imagebox' id='imagebox1' src=''/>
    <img class='imagebox' id='imagebox2' src=''/>
    <img class='imagebox' id='imagebox3' src=''/>
    <img class='imagebox' id='imagebox4' src=''/>
</span>

However - are you sure you're seeing an image not found icon?? I don't see any here

<span> <!-- Players Cards -->
    <img class='imagebox' id='imagebox1' src=''/>
    <img class='imagebox' id='imagebox2' src=''/>
    <img class='imagebox' id='imagebox3' src=''/>
    <img class='imagebox' id='imagebox4' src=''/>
</span>

note: img does not have a closing tag - it's either <img ...../> or <img .....> with no </img>