跪拜 Guibai
← All articles
Frontend · Programmer · Product

One Dev's Revenge on Slow Placeholder Services: A Single Chinese CDN for Every Frontend Asset

By 菜鸟小前端在线卖艺 ·
Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Frontend developers outside China who test or demo UIs with Chinese-language data have no equivalent service — existing mock APIs return English, and avatar generators break on CJK characters. A single CDN that speaks Chinese and stays deterministic under seed parameters removes the CI flakiness and 12-second load times that plague teams relying on picsum or placehold.

Summary

A new service, devimg.cn, replaces the fragmented trio of picsum.photos, placehold.co, and JSONPlaceholder with a single domain hosted on Tencent Cloud. Every asset — from SVG placeholders and 50+ avatar styles to real photos fetched by business scene — is accessible by writing a URL directly into an <img> tag. Seed parameters guarantee immutable, cache-forever responses, fixing the CI visual regression breakage that random third-party images cause.

Mock endpoints return Chinese names, addresses, and article titles, and the returned JSON already contains avatar and cover fields pointing back to devimg's own image endpoints. Pseudo QR codes and barcodes look scannable but carry an X-DevImage-Pseudo-Code header to prevent misuse. Skeleton screens and empty states are in progress, with four layout types and customizable Chinese text.

The service imposes a 1,000 req/min/IP soft limit and a 60 req/min/IP raster transcode cap, which covers normal development. The creator, a frontend developer building a component library, runs the project solo and warns that heavy adoption may eventually require API keys to sustain infrastructure.

Takeaways
All placeholder assets live under cdn.devimg.cn — no multi-domain sprawl, no API-key ceremony.
Seed parameters produce byte-identical responses with Cache-Control: immutable, so Playwright visual snapshots stop failing.
Avatar generation recognizes Chinese characters (e.g., 张三) and offers 50+ styles, including DiceBear, Jdenticon, and Minidenticons.
Real photos are fetched by scene (product, food, news, travel, banner, etc.) rather than by random ID, keeping demos context-appropriate.
Mock endpoints return Chinese data — names like 张三, addresses like 上海 — and embed avatar/cover URLs that point back to devimg’s own image endpoints.
Pseudo QR codes and barcodes are visually convincing but carry an X-DevImage-Pseudo-Code header; they cannot be scanned.
Default output is SVG for all synthetic assets; append .webp or .png only when a bitmap is required (e.g., mini-programs).
Rate limits are 1,000 req/min/IP for standard endpoints and 60 req/min/IP for raster transcoding.
Migration from picsum or placehold is largely a domain swap, but /800/600 returns a color block — photos require the /photo/ prefix.
Conclusions

The fragmentation of placeholder services (images, avatars, mock data) is a tax on frontend velocity that most teams just absorb; consolidating them under one deterministic domain removes a surprising amount of friction.

CI visual regression is the hidden victim of random third-party images — seed immutability isn't a nice-to-have, it's a hard requirement once snapshot testing enters the pipeline.

Chinese-first mock data exposes a genuine gap: Western mock services are useless for testing CJK typography, truncation, and alignment, and the bugs that slip through are real layout defects, not cosmetic.

The pseudo QR code is a clever defensive design — it prevents the accidental production misuse that real generated codes invite, while still looking correct in a UI mockup.

Concepts & terms
Seed-based deterministic generation
A URL parameter that acts as a stable random seed, ensuring the same input always produces the same image. Combined with Cache-Control: immutable, it makes placeholder assets safe for visual regression testing.
Pseudo QR code
A pattern that visually mimics a QR code or barcode but contains no decodable data. The service marks these with a custom HTTP header (X-DevImage-Pseudo-Code) so tooling can distinguish them from real codes.
Scene-based photo retrieval
Instead of fetching a random photo by numeric ID, the API accepts a scene parameter (product, food, banner, etc.) and returns an image contextually appropriate for that business domain.
Source: juejin.cn ↗ Google Translate ↗ Backup ↗