如何根据天气文本动态切换图片-html教程-PHP中文网

本文讲解在天气应用中，如何根据 API 返回的天气描述（如 “Clouds”“Rain”）动态设置对应 SVG 图片，重点修复 HTML 标签误用（ → ）、执行时机错误及路径匹配问题。

本文讲解在天气应用中，如何根据 api 返回的天气描述（如 “clouds”“rain”）动态设置对应 svg 图片，重点修复 html 标签误用（`` → ``）、执行时机错误及路径匹配问题。

在构建天气类 Web 应用时，常需根据 weather.weather[0].main 字段（如 "Clear"、"Rain"、"Clouds"）实时加载对应图标。但你的代码存在三个关键问题，导致图片始终空白：

✅ 1. HTML 标签错误：必须使用 `<img>`，而非 `<image></image>`

SVG 和位图图标应通过标准 <img> 元素渲染。你当前使用了 <image id="image"></image> —— 这是 SVG 内部专用标签（需配合 <svg></svg> 容器），在 HTML 文档流中无效。请立即更正为：

<div class="image">
  <img id="image" alt="Weather icon">
</div>

✅ 2. 逻辑执行时机错误：`changeImg()` 未被调用，且位置错放

原代码将 changeImg 函数作为 addEventListener 的第二个参数传入，这会覆盖事件监听器的回调函数（语法错误），且该函数从未在数据获取后执行。正确做法是：在 displayData 中直接设置 src，确保 DOM 更新与图片加载同步。

✅ 3. 文件名需严格匹配：注意大小写与空格

OpenWeatherMap 返回的 weather.weather[0].main 值为首字母大写的英文单词（如 "Clear"、"Drizzle"、"Thunderstorm"）。因此你的 SVG 文件名必须完全一致：

✅ 正确：images/Clear.svg、images/Rain.svg
❌ 错误：images/clear.svg（大小写不匹配）、images/cloudy.svg（API 不返回该值）

? 提示：可通过 console.log(weather.weather[0].main) 验证实际返回值，并检查 images/ 目录下是否存在对应文件。

✅ 修正后的完整 JS 逻辑

const button = document.querySelector('.button');
const inputLocation = document.querySelector('.location');
const temp = document.querySelector('.temp');
const desc = document.querySelector('.desc');
const image = document.getElementById('image');

button.addEventListener('click', () => {
  const city = inputLocation.value.trim();
  if (!city) return;

  fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=9f5cf42409938f351c3a005bbc01773f`)
    .then(res => {
      if (!res.ok) throw new Error('City not found');
      return res.json();
    })
    .then(data => {
      // 更新文字内容
      temp.textContent = `${Math.round(data.main.temp)}°C`;
      desc.textContent = data.weather[0].main;

      // 同步更新图片：直接使用 API 返回的天气主类型
      const weatherType = data.weather[0].main;
      image.src = `images/${weatherType}.svg`;
      image.alt = `Weather icon for ${weatherType}`;

      // 可选：添加加载失败兜底处理
      image.onerror = () => {
        console.warn(`Image not found: images/${weatherType}.svg`);
        image.src = 'images/Unknown.svg'; // 提前准备兜底图标
      };
    })
    .catch(err => {
      alert(`Error: ${err.message}`);
      console.error(err);
    });
});

? 额外建议

统一命名规范：若希望支持小写文件名，可在 JS 中转为小写：weatherType.toLowerCase()，但需确保所有 SVG 文件均以小写保存（如 rain.svg）。
预加载图标：避免首次加载延迟，可提前在页面底部隐藏加载常用图标：
```
<div style="display:none;">
  <img src="images/Clear.svg"><img src="images/Rain.svg">...
</div>
```
响应式图标：为适配不同屏幕，可为 <img> 添加 CSS 类并设置 max-width: 100%; height: auto;。