Dynamic Placeholder Image Generator

Create custom placeholder images with ease!

How to Use

This script generates a placeholder image for broken or empty image sources. You can customise the placeholder image by changing the settings in the script below.

                    
<script>
const defaultPlaceholderSettings = {
    width: 100,
    height: 100,
    bgColor: '#f0f0f0',
    fgColor: '#000000',
    text: 'Placeholder Image',
    fontSize: 16,
    fontWeight: 'normal',
    fontStyle: 'normal',
    fontFamily: 'Arial',
    iconUrl: "https://rubenlopes.uk/logo-small.png",
    iconSize: 100
};
</script>
<script src="src/placeholder.js"></script>

Generated Placeholder Image Test

Broken Image

This image has a broken src and should be replaced by a placeholder image.

Real Image

This is a real image that should not be replaced by a placeholder.

Empty src Image (Large)

This image has an empty src and should be replaced by a placeholder image.

Empty src Image

This image has an empty src and should be replaced by a placeholder image.

Empty src Image (Large)

This image has an empty src and should be replaced by a placeholder image.