历史上的今天：img 图片字段处理（空字符串、防盗链、懒加载）指南
# 历史上的今天：img 图片字段处理（空字符串、防盗链、懒加载）指南
> 接口：历史上的今天（apiCode=119，接入点 119-42）· 免费 · 返回字段 `img` · 适用人群：前端工程师 · 阅读时间：约 6 分钟
## 核心要点
- `img` 无图时返回**空字符串 `""`**（不是 `null`，也不是缺字段），用 `img === ""` 判断无图。
- 有图时是 `http://static1.showapi.com/app2/history_img/...jpg` 外链，是否防盗链以实际访问为准。
- 列表多图务必懒加载 + `onerror` 兜底，避免裂图与首屏卡顿。
## Why：图片是最容易"裂"的地方
`img` 字段看着简单，但"有没有图""图能不能直接引""加载失败怎么办"三件事处理不好，页面就会出现一串裂图图标。本文把这三件事一次讲透。
## What：img 字段事实
| 取值 | 含义 | 处理 |
|------|------|------|
| `""`（空字符串） | 该事件无配图 | 显示文字卡片/占位图，不要渲染 `<img>` |
| `http://static1.showapi.com/...jpg` | 配图外链 | 正常渲染，建议懒加载 |
> 实测：`img` 无图时为 `""`；有图时为 `static1.showapi.com` 域名下的 jpg。是否启用 Referer 防盗链以你对该域名的实际请求结果为准，本文不臆断。
## How：健壮的图片渲染
### 前端（HTML/JS）
```html
<img id="cv" alt="历史配图" loading="lazy"
onerror="this.onerror=null;this.style.display='none';document.getElementById('ph').style.display='block'">
<div id="ph" style="display:none">📜 暂无配图</div>
<script>
function renderImg(img) {
const cv = document.getElementById("cv");
const ph = document.getElementById("ph");
if (!img) { // img 为 "" 时走占位
cv.style.display = "none"; ph.style.display = "block"; return;
}
cv.src = img; cv.style.display = "block"; ph.style.display = "none";
}
</script>
```
### 后端代理（如需规避外链/统一缓存，Python）
```python
import requests
def proxy_img(img_url: str):
if not img_url: # 空字符串直接返回无图
return None
# 由你的服务器转发，规避前端直接引外链可能的问题
r = requests.get(img_url, timeout=10)
r.raise_for_status()
return r.content # 转存到自己的 OSS/本地，返回自有 URL
```
### Node.js 列表渲染
```javascript
list.forEach((it) => {
const card = document.createElement("div");
if (it.img) {
const im = document.createElement("img");
im.loading = "lazy"; // 懒加载
im.src = it.img;
im.onerror = () => { im.remove(); }; // 加载失败移除
card.appendChild(im);
} else {
card.appendChild(document.createTextNode("（无配图）"));
}
});
```
## 返回示例与解析
```json
{ "year": "2008", "month": 2, "day": 20,
"title": "2008年2月20日 韩国一军用直升机坠毁造成7人死亡",
"img": "http://static1.showapi.com/app2/history_img/3cde348c8e484b5e8b7d708d145be1f3.jpg" }
```
与另一条无图：
```json
{ "year": "1960", "month": 2, "day": 20, "title": "1960年2月20日 中国石油大军会战大庆", "img": "" }
```
## 进阶 / 边界
- **防盗链未知**：直接 `<img src="static1.showapi.com/...">` 是否会被 Referer 拦截，以你的实际环境访问结果为准；如被拦，走后端代理转发并转存自有存储。
- **懒加载**：列表多图务必 `loading="lazy"`，否则一次加载几十条图拖慢首屏。
- **转存策略**：若长期展示，建议把图片下载到自己存储并替换 URL，避免源站变更/失效导致历史文章裂图。
## FAQ
**Q1：img 是 null 还是空字符串？**
实测为**空字符串 `""`**，不是 `null`。用 `!img` 或 `img === ""` 判断无图。
**Q2：图片加载失败怎么处理？**
`img.onerror` 里隐藏元素或显示占位，避免裂图图标。
**Q3：能直接用 static1.showapi.com 的图吗？**
可以试试直接引；若遇防盗链/跨域，用后端代理转发并转存到自有存储更稳。
**Q4：列表很多图会卡吗？**
会。务必懒加载 + 失败兜底 + 必要时后端转存。
## 相关能力 / 下一步阅读
- [历史上的今天返回字段全解：list / title / year / content / img 一文读懂](https://www.showapi.com/guides/history-today-response-fields-119) — `img` 字段类型定义。
- [历史上的今天：needContent 参数与图文详情的正确打开方式](https://www.showapi.com/guides/history-today-needcontent-119) — `img` 的返回开关。
- [历史上的今天：网站/App 每日历史卡片组件集成指南](https://www.showapi.com/guides/history-today-widget-119) — 组件里如何放图。
- **本系列共 10 篇**：查看[历史上的今天指南总目录](https://www.showapi.com/guides/history-today-guides-119)
