JS Blackjack游戏：不使用this.style.display='none'隐藏图片缺失图标

针对你遇到的初始空src图片显示断链图标，且onerror隐藏后无法恢复的问题，给你两个简洁的解决方案，无需额外JS函数，减少HTML与JS的交互：

方案一：用CSS属性选择器控制显示 #

利用CSS的属性选择器，默认隐藏src为空的图片框，当src被设置为有效路径后自动显示：

/* 初始空src时隐藏 */
.imagebox[src=''] {
  display: none;
}

/* 当src有有效值时显示（根据布局调整display属性，比如inline-block/block） */
.imagebox[src]:not([src='']) {
  display: inline-block;
}

只需在样式文件或<style>标签中添加这段CSS，无需修改现有HTML和JS代码，浏览器会自动根据src属性的变化切换显示状态。

方案二：使用透明base64占位图作为初始src #

将图片框的初始src设置为1x1的透明GIF（base64编码，无需额外文件），这样不会触发浏览器的断链图标，后续JS替换src时直接覆盖即可：

修改后的HTML：

<span> <!-- Players Cards -->
    <img class='imagebox' id='imagebox1' src='data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=='>
    <img class='imagebox' id='imagebox2' src='data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=='>
    <img class='imagebox' id='imagebox3' src='data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=='>
    <img class='imagebox' id='imagebox4' src='data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=='>
</span>

这个透明占位图体积极小，本地运行完全没问题，初始状态下图片框透明（看不到断链图标），当deal函数设置有效src后，正常显示卡牌图片。

这两个方案都不需要编写额外的JS函数来恢复显示，完全符合你要的简洁、低交互需求。

内容的提问来源于stack exchange，提问作者browny121