freecodecamp 项目不支持上传本地文件，因此需使用可公开访问的图片 url；本文详解如何获取合规图源、正确嵌入 `` 标签，并规避常见错误（如失效链接、跨域限制或地区屏蔽）。
在 freeCodeCamp 的前端项目（如 Tribute Page、Survey Form 等）中，你无法像本地开发环境那样将图片文件放入项目文件夹并使用相对路径（如 ./images/photo.jpg）。这是因为 freeCodeCamp 的在线编辑器仅运行 HTML/CSS/JS 代码，不提供文件系统存储功能。因此，唯一可靠的方式是引用一个可通过 HTTP(S) 公开访问、无需登录或权限验证的图片 URL。
✅ 推荐图源与获取方法
优先选择以下稳定、免费、全球可访问的图床或开源图库：
- Unsplash：高质量免费图，直接复制图片页面的「Copy image address」链接（确保以 https:// 开头）；
- Pexels：同理，右键 → “复制图片地址”；
- Pixabay：支持筛选“免版税”，链接安全可靠。
⚠️ 注意：避免使用 Google Drive、OneDrive 或个人网盘的“分享链接”——这类链接通常返回 HTML 页面而非图片资源，浏览器无法渲染；同样，Imgur 在部分区域受限，不建议依赖。
✅ 正确嵌入语法（含可选属性）
<img src="/uploads/20260122/17690622226971bf4e931b6.jpg" alt="描述性文字，如：Dr. Norman Borlaug, father of the Green Revolution" width="400" height="300" >
- src 是必需属性，必须为直链图片 URL（响应头含 Content-Type: image/*）；
- alt 属性不可省略（无障碍访问与 SEO 要求），freeCodeCamp 测试会校验；
- width/height 可选，但推荐设置以避免布局偏移（CLS 优化）。
? 验证链接是否有效
在浏览器新标签页中直接粘贴 src 地址：若显示图片（而非 404、登录页或“Access Denied”），即为有效直链。
? 小技巧：快速生成合规链接
- 在 Unsplash 搜索关键词（如 portrait scientist）；
- 点击目标图片 → 点击右下角「Download free」→ 在弹出框中点击「Copy link」；
- 粘贴到 <img src="..."> 中即可。
只要 URL 稳定、图片可公开加载，freeCodeCamp 的测试器就能正常识别并渲染图像。记住：不是所有“看起来像图片”的链接都有效，核心在于服务器是否直接返回图像二进制流。坚持使用权威图源，一次配置，全程无忧。
