freecodecamp 项目不支持本地文件上传，因此必须使用可公开访问的图片 url；本文详解如何获取合规图源、正确嵌入 `` 标签，并避开常见访问限制与安全问题。
在 freeCodeCamp 的前端项目（如 Tribute Page、Survey Form 等）中，你无法像本地开发那样将图片文件拖入项目文件夹并引用相对路径（如 ./images/photo.jpg）。这是因为 freeCodeCamp 的代码编辑器运行在浏览器沙箱中，后端不提供文件存储服务——所有资源必须通过 公开、稳定、跨域可访问的 HTTPS URL 加载。
✅ 正确做法是：使用托管在可靠图床的图片链接，并通过 <img> 标签的 src 属性引入：
<img src="/uploads/20260122/17690614216971bc2de1c56.jpg" alt="A person smiling confidently" width="400" height="300" >
? 关键要求与推荐方案：
- 必须使用 HTTPS 协议：HTTP 链接会被现代浏览器阻止（混合内容警告）。
- 确保 CORS 允许：图片服务器需返回 Access-Control-Allow-Origin: *（Unsplash、Pixabay、Pexels 等主流图库默认支持）。
-
避免受限或不稳定来源：
❌ 不推荐 Google Drive 分享链接（含身份验证跳转，非直链）；
❌ 避免 Imgur（部分地区被屏蔽，且免费版链接可能失效）；
✅ 推荐使用：
? 小技巧：在 Unsplash 上复制链接后，可手动精简参数（保留 https://.../photo-xxxx?...&auto=format... 即可），不影响加载；但建议保留 alt 属性以满足无障碍访问（a11y）和项目审核要求。
⚠️ 注意事项：
- freeCodeCamp 测试器会校验 src 是否为有效 URL，空值、本地路径（./xxx）、data URL 或 base64 编码均不通过验证；
- 避免使用社交平台（如微博、Instagram）图片链接——它们通常带重定向、防盗链策略或登录墙；
- 建议为图片添加 width/height 属性或 CSS 控制尺寸，防止布局偏移（Cumulative Layout Shift, CLS）。
总之，一张合规的网络图片 = ✅ HTTPS + ✅ 直链可访问 + ✅ 无权限拦截 + ✅ 合理语义化标签。按此标准选取图源，即可顺利通过 freeCodeCamp 所有图像相关测试。
