Style broken images

img {
    position: relative;

    /* The initial styles */
    display: block;
    height: auto;
    min-height: 4rem;
    width: 100%;
}

img::before,
img::after {
    /* Take full size of the image */
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

img::before {
    /* Hide the default placeholder */
    background: #fff;
    content: '';
}

img::after {
    /* Taken from the `alt` attribute of the element */
    content: attr(alt) ' image is broken';
    border: 2px dotted #d1d5db;

    /* Center */
    align-items: center;
    display: flex;
    justify-content: center;
}

<img src="/assets/img/not-found.png" alt="front-end tips" />