渲染NFT媒体时需将IPFS/Arweave协议转为HTTP网关URL，按后缀区分<img>/<video>标签，动态注入合约地址与Token ID，避免前端直连OpenSea API，做好加载状态、错误fallback及移动端兼容性处理。
用 <img> 和 <video> 渲染 NFT 媒体时要注意什么
大多数 NFT 的媒体文件（图片、GIF、MP4）并不直接链在链上，而是托管在 IPFS、Arweave 或中心化 CDN。浏览器无法直接解析 ipfs://Qm… 或 ar://… 协议，必须转换为可访问的 HTTP 网关 URL。
常见错误是把原始 animation_url 或 image 字段原样塞进 src，结果资源加载失败、页面空白。
- IPFS 链接如
ipfs://QmXyZ…→ 替换为https://ipfs.io/ipfs/QmXyZ…或https://gateway.pinata.cloud/ipfs/QmXyZ… - Arweave 链接如
ar://abc123→ 改用https://arweave.net/abc123 - 优先检测文件后缀：
.mp4/.webm用<video>，.gif/.png/.jpg用<img>；避免对 MP4 用<img>导致静帧显示 - 加
controls和loop属性提升体验：<video controls loop muted>，尤其对自动播放的 GIF 替代方案
展示合约地址和 Token ID 时别硬编码 0x… 和数字
NFT 页面本质是「单页应用」，但入门常误写成静态 HTML——把 0xAbc… 地址和 12345 ID 写死在 HTML 里，导致一个页面只能看一个藏品。
真正可行的做法是通过 URL 参数或 JSON 数据动态注入：
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 用 URL 查询参数：访问
/nft.html?contract=0xAbc…&id=12345，再用 JS 读取new URLSearchParams(window.location.search) - 更稳妥的是后端或构建时生成 JSON 文件（如
/nft/0xAbc…/12345.json），前端fetch()获取元数据，再渲染字段 -
token_id一定是字符串类型（链上可能是 uint256，但 JS 处理大数易精度丢失），渲染前显式转成String(tokenId) - 合约地址要格式化为带短横的截断形式（如
0xAbc…789），并加title属性悬停显示完整地址，方便用户复制
fetch 调用 OpenSea 或 Covalent API 时跨域和限流怎么绕
直接在前端调 OpenSea 的 /api/v2/asset/ 接口会触发 CORS 错误；且免费 Key 每分钟只有 5–10 次请求，刷新几次就 429。
不建议前端直连——这不是权限问题，是架构问题：
- 不要在 HTML 里写
fetch("https://api.opensea.io/api/v2/asset/…")，浏览器会拦，OpenSea 也明确禁止前端 Key 泄露 - 改用轻量代理：本地起个
server.js（Express 或甚至npx http-server -p 3000配反向代理规则），或用 Vercel Edge Function 封装一层，转发并缓存响应 - 退一步，用链上只读方式：通过 Ethers.js 连接 RPC（如 Alchemy），调用
contract.tokenURI(tokenId)拿到元数据 URL，再fetch那个 URL（它通常是公开可读的） - 务必加 loading 状态和错误 fallback：
<div class="loading">+catch(e) { el.innerHTML = "元数据加载失败" }
CSS 实现「藏品卡片」时别忽略移动端手势和性能
很多人用 transform: scale(1.05) 做悬停放大效果，但在 iOS Safari 上可能触发双击缩放或卡顿，尤其页面含视频时。
关键不是“怎么好看”，而是“怎么不崩”：
- 给
<video>加playsinline和webkit-playsinline，否则 iOS 全屏播放打断浏览流 - 用
will-change: transform提前告知浏览器该元素将动画，避免重排；但别滥用，仅加在实际 hover 的容器上 - 移动端禁用双指缩放：
<meta name="viewport" content="width=device-width, user-scalable=no">，不然用户误操作放大页面 - 藏品描述文本用
word-break: break-word，防止长 token ID 或 description 中无空格字符串撑破容器
name 和 description 可能为空、含 XSS 字符、或超长乱码，所有字段渲染前必须做 textContent 赋值或严格白名单过滤，不能直接 innerHTML。 
