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, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}

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}`);
});