**已关闭。**此问题是not reproducible or was caused by typos。目前不接受答案。
这个问题是由一个错字或一个无法再重现的问题引起的。虽然类似的问题可能在这里是on-topic，但这个问题的解决方式不太可能帮助未来的读者。
上个月关门了。
Improve this question
嗨，我最近开始了一个项目，在js这是所谓的天气应用程序。我做这个项目，喜欢学习获取API，后来生病添加css的trsnitions和动画反正我做了整个项目的功能和一切，但问题是看Problem正如你可以看到我的同胞程序员有这个恼人的广场，如主屏幕的东西，我想知道如何删除它
Js Code：
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,[email protected],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>Ive一直试图删除广场，我试过，改变背景的开关情况下默认图像在年底类似的图像的背景什么也没有发生，请如果你回答尝试也解释，同时回答我一个quiite begiiner
1条答案
按热度按时间t3psigkw1#
这个“烦人的方块”就是
<img>元素：它没有显示图像，因为，好吧，你希望它显示什么图像？
src属性指定了图像的来源。而""没有指定任何东西。所以它成功地显示了（缺少）指定的图像。（方框内的图标是浏览器的默认指示，表明页面正在尝试显示图像，但未能显示图像。）一种方法是显示某种类型的 default 图像。类似于：
(Or无论你想要显示的默认图像值是什么。
另一种选择是将元素样式化为隐藏。例如，您可以添加一个CSS类来隐藏某些内容：
并在默认情况下将该类包含在元素中：
然后在JavaScript代码中，在显示图像时删除该类：
如果在任何时候你想重新隐藏元素，只需再次添加类：