常用示例
点击示例代码可直接复制使用
点击示例代码可直接复制使用
探索占位图生成器的完整功能
https://tu.tuya.ink/[width]x[height]/[background]/[color]/[font]/[text].[format]
?font=AnotherFont）
基本尺寸
/800x600.png
带背景色
/800x600/f0f4f8.jpg
完整参数
https://tu.tuya.ink/800x600/f0f4f8/1e3a8a/示例图片.png
中文需要双重URL编码以确保正确传输：
"测试" → "%25E6%25B5%258B%25E8%25AF%2595"
3位简写会自动扩展为6位完整格式：
"ccc" → "cccccc"
使用srcset属性为不同设备提供合适尺寸：
<img srcset="https://tu.tuya.ink/400x300.png 400w, https://tu.tuya.ink/800x600.png 800w" sizes="(max-width: 600px) 400px, 800px">
<img src="https://tu.tuya.ink/800x600/f0f4f8/1e3a8a/示例图片.png" alt="占位图">
function generatePlaceholder(width, height, text = '') {
const bgColor = 'f0f4f8';
const textColor = '1e3a8a';
const encodedText = encodeURIComponent(encodeURIComponent(text));
return `https://tu.tuya.ink/${width}x${height}/${bgColor}/${textColor}/${encodedText}.png`;
}
function PlaceholderImage({ width, height, text }) {
const bgColor = 'f0f4f8';
const textColor = '1e3a8a';
const encodedText = encodeURIComponent(encodeURIComponent(text || `${width}x${height}`));
return (
<img
src={`https://tu.tuya.ink/${width}x${height}/${bgColor}/${textColor}/${encodedText}.png`}
alt={text || '占位图'}
/>
);
}
https://tu.tuya.ink//1200x630/1877f2/ffffff/Facebook分享图.jpg推荐尺寸: 1200×630像素
https://tu.tuya.ink//1080x1080/f72585/ffffff/Instagram帖子.png正方形帖子标准尺寸
https://tu.tuya.ink//1200x675/1da1f2/ffffff/Twitter卡片.png推荐尺寸: 1200×675像素