-2

I can't hide image broken icon. If I display none, it will not display my css.

 <img 
        className="card__image" 
        src={image ? image : ""}
        alt={name || ""}
      />

I want to remove just broken icon without touching css example

Gin Ichimaru
  • 27
  • 7
  • Does this answer your question? [What's the valid way to include an image with no src?](https://stackoverflow.com/questions/5775469/whats-the-valid-way-to-include-an-image-with-no-src) – Stefnotch Mar 02 '23 at 09:48
  • what do you mean by hiding image broken link? You can hide the whole img element of course both using or `display: none` or `visibility: hidden`. The former will just ignore the whole element in the document flow, the latter will hide the element but the document flow will take into account its size (assuming you set one). Otherwise maybe you meant to have a fallback? – Diego D Mar 02 '23 at 09:48
  • Here https://stackoverflow.com/questions/980855/inputting-a-default-image-in-case-the-src-attribute-of-an-html-img-is-not-vali you will find how to deal with a fallback picture in case – Diego D Mar 02 '23 at 09:50
  • 2
    Plenty of good answers here too: [How to hide image broken Icon using only CSS/HTML?](https://stackoverflow.com/questions/22051573/how-to-hide-image-broken-icon-using-only-css-html) – jme11 Mar 02 '23 at 09:51
  • @DiegoD Thank you for suggestions. Actually, I did figure it out. Other approaches may render it slowly in large-scale projects. I went with below options in answer section. – Gin Ichimaru Mar 02 '23 at 11:00
  • @Stefnotch Thank you for the reply. Yes, it did, but I wanted to use better method, so it wouldn't render it slowly. – Gin Ichimaru Mar 02 '23 at 11:04

2 Answers2

1
{image && name ? (
        <img
          className="card__image"
          src={image}
          alt={name}
        />
      ) : (
        <div className="card__image"></div>
      )}

This approach worked for me. Thank you, I just figured it out.

Gin Ichimaru
  • 27
  • 7
0

There are several ways are existsing to hide elems in css instead display: none

Use: opacity: 0; to make elem disappear but it remains to be interactive

Or use: visibility: hidden to hide that.

Use pointer-events: none to make it non-interactive

Abdulaziz0
  • 128
  • 5