媒体查询993px以上时图片src切换失效问题求助

我正在开发一个SPA，其中某个页面的产品下方设有颜色图标按钮。点击这些图标时，上方的图片应通过JS的onclick事件切换为对应颜色的版本。该功能在992px及以下的媒体查询尺寸下正常工作，但在993px及以上尺寸时，图片不再切换。请问我遗漏了什么？

注：我已知晓其他格式问题，为解决该问题已进行多次实验性修改。

<!DOCTYPE html>
<html lang="EN">

<head>
  <title>All American Mailboxes of Houston</title>
  <link href="assets/AAM.css" rel="stylesheet" type="text/css">
  <link rel="shortcut icon" type="image/x-icon" href="/assets/flagcon.ico" />
  <link rel="canonical" href="https://www.allamericanmailboxesofhouston.com" />
  <meta name="robots" content="index, follow">
  <meta charset="utf-16">
  <meta name="copyright" content="©2021 All American Mailboxes of Houston">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="Cache-control" content="no-cache">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://allamericanmailboxesofhouston.com/assets/AAM.css" type="text/css">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>

<body class="mainPage">
  <header style="text-align:center;" id="header"><img src="https://allamericanmailboxesofhouston.com/assets/AAMH.webp" id="logo"></header>
  <!-- Navbar items -->
  <div id="navlist" class="w3-hide-small navlist">
    <a href="#" id="button1" class="nav__item-text home_btn" onClick="replaceContentInContainer('mainHolderLarge', 'home');">Home</a>
    <a href="#" id="button2" class="nav__item-text products_btn" onClick="replaceContentInContainer('mainHolderLarge', 'products');">Products</a>
    <a href="#" id="button3" class="nav__item-text compat_btn" onClick="replaceContentInContainer('mainHolderLarge', 'compatibility');">Compatibility</a>
    <a href="#" id="button4" class="nav__item-text contact_btn" onClick="replaceContentInContainer('mainHolderLarge', 'contact');">Contact Us</a>
  </div>
  <button class="w3-bar-item w3-button w3-xxlarge w3-hover-theme w3-hide-medium w3-hide-large" onclick="openSidebar()" id="open" style="margin-left: auto; margin-right: auto; display:block;">&#9776;</button>
  <button class="w3-bar-item w3-button w3-xxlarge w3-hover-theme w3-hide-medium w3-hide-large" style="display:none; margin-left: auto; margin-right: auto;" onclick="" id="close">&#9776;</button>
  <nav class="w3-sidebar w3-bar-block w3-card w3-hide-medium w3-hide-large" style="width:100%; display: none; position:static !important;" id="mySidebar">
    <div class="nav__content" style="width:100%">
      <span onclick="" class="w3-button w3-display-topright w3-xlarge w3-hide-medium w3-hide-large">X</span>
      <a href="#" id="button5" class="nav__item-text home_btn" onClick="replaceContentInContainer('mainHolder', 'home');">Home</a>
      <a href="#" id="button6" class="nav__item-text products_btn" onClick="replaceContentInContainer('mainHolder', 'products');">Products</a>
      <a href="#" id="button7" class="nav__item-text compat_btn" onClick="replaceContentInContainer('mainHolder', 'compatibility');">Compatibility</a>
      <a href="#" id="button8" class="nav__item-text contact_btn" onClick="replaceContentInContainer('mainHolder', 'contact');">Contact Us</a>
    </div>
  </nav>
  <div id="mainHolder" class="w3-content w3-padding-8 w3-hide-large" name="main" style="height: auto;">
    <!-- <div onClick="screen()" id="screen" style="border:solid 1pt black; margin-top:10vh; z-index:10000;">CLICK HERE</div>-->
    <p style="font-size: 1.5rem; text-align: justify;">Content removed for brevity</p>
  </div>
  <div id="mainHolderLarge" class="w3-content w3-padding-32 w3-hide-small w3-hide-medium" name="mainLarge" style="height: auto;">
    <p style="font-size: 1.5rem; text-align: justify;">Content removed for brevity</p>
  </div>

  <!--Holds home page content to swap into mainHolders -->
  <div id="home" class="w3-content w3-padding-8 w3-hide-large" name="mainContent" style="height: auto;" hidden>
    <p style="font-size: 1.5rem; text-align: justify;">Content removed for brevity</p>
  </div>

  <div class="w3-content w3-justify w3-padding-64" id="products" style="height: auto;" hidden>
    <div class="banner">
      <img src="https://allamericanmailboxesofhouston.com/images/prods/Products_Banner(1).webp" style="max-width: 100%;">
      <p style="font-size: 1.5rem; text-align: center;">We represent all major brands of apartment and commercial mailboxes in the industry. All of our products are approved by the U.S. Postal Service, and we proudly service mailboxes throughout the State of Texas</p>
    </div>
    <div class="CBU" id="CBU">
      <h2 style="">Cluster Box Unit (CBU) Pedestal Mailboxes</h2>
      <ul>
        <li>For outdoor centralized mail delivery</li>
        <li>CBU Pedestal mailboxes include 3 keys per tenant</li>
        <li>Engraved doors available</li>
        <li>Six types of CBU’s to meet tenant compartment and parcel locker needs</li>
        <li>Available in Sandstone, Black, Dark Bronze, Postal Grey, Forest Green, and White</li>
      </ul>
      <img loading="lazy" src="https://allamericanmailboxesofhouston.com/images/prods/CBU/CBU_WH.webp" alt="Color Previews" id="CBU_WH" />
      <img loading="lazy" src="https://allamericanmailboxesofhouston.com/images/prods/CBU/CBU_BK.webp" alt="Color Previews" id="CBU_BK" style="display:none;" />
      <img loading="lazy" src="https://allamericanmailboxesofhouston.com/images/prods/CBU/CBU_DB.webp" alt="Color Previews" id="CBU_DB" style="display:none;" />
      <img loading="lazy" src="https://allamericanmailboxesofhouston.com/images/prods/CBU/CBU_FG.webp" alt="Color Previews" id="CBU_FG" style="display:none;" />
      <img loading="lazy" src="https://allamericanmailboxesofhouston.com/images/prods/CBU/CBU_PG.webp" alt="Color Previews" id="CBU_PG" style="display:none;" />
      <img loading="lazy" src="https://allamericanmailboxesofhouston.com/images/prods/CBU/CBU_SD.webp" alt="Color Previews" id="CBU_SD" style="display:none;" />
      <div style="background-color: #f0f0f0;">
        <button type="button" onclick="changeColor('CBU_WH')" style="background-image: url('images/prods/CBU/WH.webp')" id="CBUWHbutton"></button>
        <button type="button" onClick="changeColor('CBU_BK')" style="background-image: url('images/prods/CBU/BK.webp')" id="CBUBKbutton"></button>
        <button type="button" onclick="changeColor('CBU_DB')" style="background-image: url('images/prods/CBU/DB.webp')" id="CBUDBbutton"></button>
        <button type="button" onclick="changeColor('CBU_FG')" style="background-image: url('images/prods/CBU/FG.webp')" id="CBUFGbutton"></button>
        <button type="button" onclick="changeColor('CBU_PG')" style="background-image: url('images/prods/CBU/PG.webp')" id="CBUPGbutton"></button>
        <button type="button" onclick="changeColor('CBU_SD')" style="background-image: url('images/prods/CBU/SD.webp')" id="CBUSDbutton"></button>
      </div>
    </div>
    <img src="https://allamericanmailboxesofhouston.com/images/prods/Prods_Bottom_Banner.webp" style="max-width: 95%; margin-top: 15%; margin-bottom: -17%;">
  </div>
  <div class="w3-content w3-justify w3-padding-64" id="compatibility" style="height: auto;" hidden>
    Content removed for brevity
  </div>
  <div class="w3-content w3-justify w3-padding-64" id="contact" style="height: auto;" hidden>
   Content removed for brevity
    </div>
  </div>
</body>
</html>

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