天气App首页出现烦人的方块背景图问题求助

我是编程新手，近期开发了一个基于JavaScript的Weather App，用于学习Fetch API，后续计划添加CSS过渡与动画效果。目前App功能已实现，但首页出现一个烦人的方块，我尝试修改switch语句中默认图片的背景为与页面背景相似的图片，但未解决问题，希望能了解如何移除该方块并得到相关解释。

JS代码 #

const apiKey = "6997e66c1b3106660cb9cef841fd76f6";
const cityInp = document.getElementById("Cityinput");
const weatherImage = document.getElementById("weatherImage");

function Search() {
  const city = cityInp.value;
  fetch(
    `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`
  )
    .then((resp) => resp.json())
    .then((data) => {
      const Weatherinfo = document.getElementById("weatherDetails");
      let weatherCondition = "";

      if (data.weather && data.weather.length > 0) {
        weatherCondition = data.weather[0].main;
      }
      const celsiusTemperature = parseInt(data.main.temp) - 273.15;
      const details = `<h2>${data.name}</h2>
            <p>${weatherCondition}</p>
            <p>Temperature: ${celsiusTemperature.toFixed(2)}°C</p>`;
      Weatherinfo.innerHTML = details;

      switch (weatherCondition) {
        case "Clear":
          weatherImage.src = "images/clear.png";
          break;
        case "Clouds":
          weatherImage.src = "images/cloud.png";
          break;
        case "Rain":
          weatherImage.src = "images/rain.png";
          break;
        case "Snow":
          weatherImage.src = "images/snow.png";
          break;
        case "Haze":
          weatherImage.src = "images/mist.png";
          break;
        default:
          weatherImage.src = "images/def.png";
      }
    });
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
    <link rel="stylesheet" href="style.css">
    <title>Weather App</title>
</head>
<body>
    <div class="Entry">
        <input type="text" id="Cityinput" placeholder="Enter a location">
        <button onclick="Search()"><span class="material-symbols-outlined">
            search
            </span></button>
        </div>
    <div id="weatherDetails">
    </div>
    <img src="" alt="" id="weatherImage">

    
</body>
<script src="Fetch.js"></script>
</html>

问题根源 #

你看到的方块是浏览器对空src属性的<img>标签的默认占位渲染。当<img>的src为空时，浏览器会自动生成一个占位框，这和你设置默认图片的背景无关——因为这个占位框是浏览器的原生样式，不是图片元素的背景。

三种可行解决方法 #

1. 初始隐藏图片，搜索后显示

修改HTML中的<img>标签，添加初始隐藏样式：

<img src="" alt="" id="weatherImage" style="display: none;">

然后在JS的fetch回调中，设置完图片源后显示图片：

// 在switch语句结束后添加
weatherImage.style.display = "block";

如果需要支持重复搜索，也可以在Search函数开头先隐藏图片，避免切换时的闪烁。

2. 设置初始默认图片（推荐）

直接给<img>设置一个初始的默认图片（比如你已经准备好的def.png）：

<img src="images/def.png" alt="Weather Icon" id="weatherImage">

这样页面加载时就会显示你指定的默认图，不会出现浏览器的占位方块，同时JS中的switch分支逻辑可以保持不变。

3. 用CSS屏蔽空图片的占位

在style.css中添加以下规则，让空src的图片不显示：

img[src=""] {
    display: none;
}

这个方法无需修改HTML和JS代码，直接通过CSS覆盖浏览器的默认行为。

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