Posted 29 days ago. Visible to the public. Repeats.

Generating test images on the fly via JavaScript

When you need test images, instead of using services like lorempixel or you may generate test images yourself. You can do this via JavaScript.

Here is an ES6 function that generates a simple SVG image and returns it as a data: URI. All browsers support SVG, and you can easily adjust it yourself.

function svgUri(text) { let svg = ` <svg width="320" height="240" xmlns=""> <rect x="0" y="0" width="320" height="240" style="fill: #ddd; stroke: #666; stroke-width: 4;" /> <text x="50%" y="50%" font-size="24" text-anchor="middle" alignment-baseline="middle" fill="#666"> ${text} </text> </svg> ` return 'data:image/svg+xml;charset=utf8,' + window.escape(svg) }

You can simply set this as an image's src attribute. See the attached JSFiddle for an example.

Growing Rails Applications in Practice
Check out our new e-book:
Learn to structure large Ruby on Rails codebases with the tools you already know and love.

Author of this card:

Arne Hartherz
Last edit:
26 days ago
by Thomas Eisenbarth
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Arne Hartherz to makandra dev