Posted about 2 years ago. Visible to the public. Repeats. Linked content.

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.

Owner of this card:

Arne Hartherz
Last edit:
about 1 month ago
by Arne Hartherz
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
This website uses cookies to improve usability and analyze traffic.
Accept or learn more