无法通过background属性切换图片问题求助（附代码）

我制作了一个包含两栏布局的section：第一栏包含文本和3个按钮，第二栏包含img元素。代码运行无异常、控制台无报错，但img元素的图片始终无法显示，该section未编写相关CSS代码，已尝试用console.log排查但未找到问题原因。

我的代码 #

HTML代码 #

</section>
    <div class="mb-5 pb-5 mt-5">
      <section class="section-container">
        <div class="text-container">
          <div class="text">
            <h2>HyperOliviaSmile</h2>
            <p style="color: #d54415">Fast treatment times. Period.</p>
            <p id="removepadding">
              With our exclusive HyperByte device included with each teeth
              aligner plan, you get fast and comfortable treatment for a smile
              you love.
              <sup>4</sup>
            </p>
          </div>
          <div class="button-row">
            <button class="firstbtn">
              <img src="img/jsimg/HyperByte.avif" />
              <p>HyperOliviaSmile</p>
            </button>
            <button class="secbtn">
              <img src="img/icon_basma/garante.jpeg" />
              <p>Guarantee</p>
            </button>
            <button class="thirdbtn">
              <img
                src="img/jsimg/Doctor Directed.avif"
                style="object-fit: contain"
              />
              <p>DoctorDirected</p>
            </button>
          </div>
        </div>
        <div class="image-container">
          <img
            class="img1"
            style="position: relative ; background-image:url(img/jsimg/home_guarantee_900x.webp);"
          />
        </div>
      </section>
    </div>

JS代码 #

document.addEventListener("DOMContentLoaded", function() {
  const button1 = document.querySelector('.firstbtn');
  const button2 = document.querySelector('.secbtn');
  const button3 = document.querySelector('.thirdbtn');
  const img1 = document.querySelector('.img1');
  const newText = document.querySelector('.text')
  
  button1.addEventListener('click', () => {
    updateButtonState(button1);
    img1.style.backgroundImage="url(img/jsimg/home_hyperbyte_900x.webp)";
    newText.innerHTML ='<h2 >HyperOliviaSmile</h2><p style="color: #d54415;">Fast treatment times. Period.</p><p>With our exclusive HyperByte device included with each teethaligner plan, you get fast and comfortable treatment for a smileyou love. <sup>4</sup></p></p>'

  });
  
  button2.addEventListener('click', () => {
    updateButtonState(button2);
    img1.style.backgroundImage="url(img/jsimg/home_guarantee_900x.webp)";
    newText.innerHTML= '<h2 >Our Guarante</h2><p style="color: #d54415;">Your smile, for life.</p><p >You own your smile, and you should own it forever. If your smile moves out of alignment at any time after your treatment with Byte aligners, we’ll help get it back at no additional cost. </p>'
  });
  
  button3.addEventListener('click', () => {
    updateButtonState(button3);
    img1.style.backgroundImage="url(img/jsimg/home_smilescience_900x.webp)";
    newText.innerHTML ='<h2>Doctor Directed</h2><p  style="color: #d54415;">Your treatment plan is reviewed and approved by a licensed dentist or orthodontist.</p><p>Your clinical team is available 7 days a week to help monitor your progress.</p>'
  });
  
  function updateButtonState(clickedButton) {
    button1.classList.remove('addborder');
    button2.classList.remove('addborder');
    button3.classList.remove('addborder');
  
    clickedButton.classList.add('addborder');
  }
});

解决方法 #

1. 修正img标签的错误用法 #

img标签的核心用途是通过src属性加载图片，你现在给它设置background-image属于误用，且未设置宽高，导致图片无法显示。有两种修复方式：

方式一：改用div承载背景图

将img标签替换为div，同时添加宽高和背景图样式：

<div class="image-container">
  <div class="img1" style="position: relative; background-image:url(img/jsimg/home_guarantee_900x.webp); width: 900px; height: auto; background-size: cover; background-repeat: no-repeat;"></div>
</div>

JS代码无需修改，保持切换background-image的逻辑即可。

方式二：使用img的src属性

修改HTML中的img标签，用src加载初始图片：

<div class="image-container">
  <img class="img1" src="img/jsimg/home_guarantee_900x.webp" alt="Guarantee" style="width: 100%; height: auto;" />
</div>

然后修改JS中切换图片的逻辑，改为更新src属性：

// button1点击事件
img1.src = "img/jsimg/home_hyperbyte_900x.webp";
// button2点击事件
img1.src = "img/jsimg/home_guarantee_900x.webp";
// button3点击事件
img1.src = "img/jsimg/home_smilescience_900x.webp";

2. 验证图片路径 #

检查图片路径是否与项目文件结构匹配：

• 确认img/jsimg/xxx.webp这类路径是否正确，比如HTML文件是否在根目录，img文件夹是否位于根目录下。
• 打开浏览器开发者工具的Network标签，查看图片请求状态，若显示404则说明路径错误，需修正路径。

3. 添加元素尺寸样式 #

无论使用哪种方式，都需要给图片容器/img元素设置明确的尺寸，否则元素高度可能为0导致图片不可见：

.img1 {
  width: 100%; /* 或固定宽度如900px */
  height: auto; /* 保持图片比例 */
  /* 若用背景图需额外添加 */
  background-size: cover;
  background-repeat: no-repeat;
}

4. 可选：兼容WebP格式 #

WebP格式在部分旧浏览器中不支持，若需要兼容，可提供JPG/PNG格式的降级图片，或通过JS检测浏览器支持性后切换图片格式。

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