最稳妥方式是使用绝对URL指向CDN或自有服务器图标资源，避免file://协议和CORS限制；推荐从jsdelivr.net等免费源获取SVG/PNG，动态映射气象代码到图标路径，并用vertical-align: middle等样式确保表格内对齐。
用 <img> 标签嵌入天气图标时，src 路径必须可访问
本地文件路径（如 ./icons/sun.png）在某些浏览器或 HTTP 服务下会因 CORS 或协议限制（file:// 协议）导致图标不显示。最稳妥的方式是使用绝对 URL，指向托管在 CDN 或自有服务器上的图标资源。
- 推荐从免费图标准备源获取 SVG/PNG，例如
https://cdn.jsdelivr.net/npm/weather-icons@2.0.11/svg/day-sunny.svg - 避免用相对路径
images/rain.svg直接写死，除非你确认所有页面都部署在同一级目录下且 Web 服务已正确配置静态资源路由 - 若后端返回气象代码（如 OpenWeatherMap 的
weather.id或weather.main），前端需映射到对应图标路径，例如："Clear" → "day-sunny.svg"，"Rain" → "rain.svg"
表格中动态渲染天气图标要绑定数据，别硬编码 <img>
在表格单元格里写死 <img src="sun.png"> 看似简单，但无法响应实时天气变化。实际项目中，图标应随数据状态更新，尤其在使用 Vue/React 或纯 JS 动态生成表格时。
- 用 JS 拼接
<img>时，确保src值非空且格式合法，否则会出现<img src="">导致空白占位或 404 控制台警告 - Vue 中推荐用
v-bind:src绑定计算属性；React 中用src={getWeatherIcon(weatherCode)}，并提前处理未识别 code 的 fallback（如默认unknown.svg） - 注意：某些气象 API 返回的 icon 字段是短码（如
"01d"），需查表转换，不能直接拼成 URL —— OpenWeatherMap 的 icon URL 格式是https://openweathermap.org/img/wn/{code}@2x.png
图标尺寸和对齐容易破坏表格布局
<img> 默认是 inline 元素，自带基线对齐（baseline），在 <td> 里常导致上下错位、行高异常，尤其搭配文字时。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 统一加样式：
style="vertical-align: middle; height: 1.2em; width: 1.2em;"，用 em 单位适配字体缩放 - 避免设固定像素宽高（如
24px），否则在响应式表格或高 DPI 屏幕下模糊或溢出 - 若图标 SVG 本身含 viewBox，优先用
<svg>内联替代<img>，可完全控制颜色和尺寸，且无额外请求
SVG 内联比 <img> 更可控，但要注意 XSS 风险
如果后端返回的是 SVG 字符串（比如通过 API 获取内联 SVG 内容），直接插入 innerHTML 渲染虽灵活，但存在注入风险。
立即学习“前端免费学习笔记（深入）”；
- 仅当 SVG 来源可信（如自己维护的图标库）才用
element.innerHTML = svgString - 不要把用户输入或第三方 API 返回的任意 SVG 直接插入 DOM —— 可能含
<script>或onload事件 - 更安全的做法：用
DOMParser解析 SVG 字符串，移除危险标签/属性后再挂载；或统一转为<img src="data:image/svg+xml,...">Base64 方式加载
