Remove the break icon in the img element without deleting that element

I tried to remove the broken icon in the img element when the destination url doesn't exist, without deleting the img element :

HTML:

<img src="error.png">

CSS:

img {
  width: 100px;
  height: 100px;
  background-image: url(url.png);
  background-size: cover;
}

Instead of deleting the img element, I prefer to bring up the background-img without a broken icon.

I hope someone help me, I really need this.

According to the answer I found on Stack Overflow, try using img:after in combination with the content property.
https://stackoverflow.com/questions/22051573/how-to-hide-image-broken-icon-using-only-css-html#answer-37192970

img:after {  
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-image: url(url.png);
  content: '';
}

Here you can find the working example: https://codepen.io/filipalbert/pen/QWZxPMp

You can use ::before and ::after for this.

Something like this:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

img {

position: relative;
width: 200px;
height: 200px;
}

img::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(https://via.placeholder.com/200);
background-size: cover;
}

<!-- language: lang-html -->

<img src="wrong_link">
<img src="https://via.placeholder.com/200">

<!-- end snippet -->