react如何安全请求图片
使用 HTTPS 请求图片
确保图片资源的 URL 使用 HTTPS 协议，避免数据在传输过程中被篡改或窃取。现代浏览器对混合内容（HTTP 和 HTTPS 混合）会发出警告甚至阻止加载。
<img src="https://example.com/secure-image.jpg" alt="Secure Image" />验证图片来源
仅从可信的域名或 CDN 加载图片，避免使用用户提供的未经验证的 URL。可以通过正则表达式或 URL 解析库验证域名是否在白名单内。
const trustedDomains = ['trusted1.com', 'trusted2.com'];
const url = new URL(userProvidedUrl);
if (!trustedDomains.includes(url.hostname)) {
// 拒绝加载或使用占位图
}设置 CSP 头
通过 Content Security Policy (CSP) 限制图片加载的源，防止 XSS 攻击导致恶意图片加载。在服务器或 meta 标签中配置：
<meta http-equiv="Content-Security-Policy" content="img-src 'self' https://trusted-cdn.com;" />使用 crossorigin 属性
对于跨域图片，添加 crossorigin="anonymous" 属性，确保 CORS 策略生效，避免敏感数据泄露。
<img src="https://cross-origin-example.com/image.jpg" crossorigin="anonymous" />错误处理和占位图
为 <img> 添加 onError 回调，在加载失败时替换为安全的占位图或默认内容。
<img
src="https://example.com/image.jpg"
onError={(e) => e.target.src = '/fallback.jpg'}
/>避免内联 Base64 图片
Base64 编码的图片会增加 HTML 体积，可能触发 CSP 限制。优先使用外部 URL，仅在必要时（如小图标）使用内联。
预加载关键图片
通过 <link rel="preload"> 提前加载关键图片，减少渲染延迟并确保资源完整性。
<link rel="preload" href="hero-image.jpg" as="image" />图片懒加载
使用 loading="lazy" 延迟加载非关键图片，节省带宽并提升性能。
<img src="large-image.jpg" loading="lazy" alt="Lazy Loaded" />
