Sometimes you just need a placeholder image right at your finger tips. Just enter the width + x + height at the end of this URL and off you go!
Example: https://nosrc.net/100x100
or https://nosrc.net/100
creates
FAQ
- What is this?
- This is a simple tool for generating dummy/filler images on the fly at whatever size you want.
- How do I use it?
- Simply add the width, an 'x', and the height (example) of the image you want and my script will spit out a gray box to the size you want with the image dimensions written on top.
- Can I use a dummy image url as an image source?
- Yup, that was what it was designed for. Try this:
<img src="http://nosrc.net/325x123">
- Awesome! how does it work?
- See for yourself! The important bits are below, and the full source is at https://github.com/fooey/nosrc
- Where did this come from?
- Inspired by dummyimage.com
Node.js Source
const http = require('http'); const { readFile } = require('fs').promises; const host = '0.0.0.0'; const port = 3000; const placeholderRoutes = /^\/(\d{1,9}x\d{1,9}|\d{1,9})$/i; const placeholderShortcut = /^\/(\d{1,9})$/i; function escapeHtml(unsafe) { return unsafe.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"'); } function serveResponse(res, contentType, content) { res.setHeader('Content-Type', contentType); res.writeHead(200); return res.end(content); } const servePlaceholder = (url, res) => { const dimensions = url.match(placeholderRoutes).pop(); const [width, height] = placeholderShortcut.test(url) ? [dimensions, dimensions] : dimensions.split('x'); const svg = `<svg baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"> <path fill="#ccc" d="M0 0h${width}v${height}H0z"/> <text x="${width - 2}" y="${height - 2}" font-size="12" text-anchor="end">${width}×${height}</text> </svg>`; return serveResponse(res, 'image/svg+xml', svg); }; const serveHtml = (res) => { return Promise.all([readFile(`${__dirname}/public/index.html`), readFile(`${__dirname}/index.js`)]).then( ([htmlContents, sourceContents]) => { const escapedSource = escapeHtml(sourceContents.toString()); const mergedContents = htmlContents.toString().replace('<pre />', `<pre>${escapedSource}</pre>`); return serveResponse(res, 'text/html', mergedContents); } ); }; const serveFavicon = (res) => { return readFile(`${__dirname}/public/favicon.ico`).then((contents) => serveResponse(res, 'image/x-icon', contents)); }; const requestListener = (req, res) => { if (placeholderRoutes.test(req.url)) { return servePlaceholder(req.url, res); } else if (req.url === '/') { return serveHtml(res); } else if (req.url === '/favicon.ico') { return serveFavicon(res); } else { res.setHeader('Content-Type', 'text/html'); res.writeHead(404); return res.end('not found'); } }; const server = http.createServer(requestListener); server.listen(port, host, async () => { console.log(`Server is running on http://${host}:${port}`); });