this probably needs some work on the isImageUrl function but it works for this instance at least haha

(function() {
    Array.from(document.querySelectorAll('a')).filter(e => isImageUrl(e.href)).forEach(imageLink => {
        var imageElement = document.createElement('img');
        imageElement.src = imageLink.href;
        imageLink.after(imageElement);
        imageLink.style.display = 'none'
    });
})();

function isImageUrl(input){
    var url = new URL(input.toLowerCase());
    return url.pathname.endsWith('.jpg')
        || url.pathname.endsWith('.png')
        || url.pathname.endsWith('.gif');
}

oh and I guess it needs to be re-executed for when more comments are loaded by scrolling. in that case the already created image elements would double up, but you could just delete the original image link… it is quick and dirty after all

edit: V2 is here

(function() {
    console.log('script loaded');
    setInterval(findAndReplaceImageLinks, 10);
})();

function findAndReplaceImageLinks(){
    Array.from(document.querySelectorAll('a')).filter(e => isImageUrl(e.href)).forEach(imageLink => {
        if (imageLink.classList == 'fst-italic link-dark link-opacity-75 link-opacity-100-hover'){ return; }

        //console.log(imageLink)
        var imageElement = document.createElement('img');
        imageElement.src = imageLink.href;
        imageLink.after(imageElement);
        imageLink.remove();
        console.log('image replaced');
    });
}

function isImageUrl(input){
    var url = new URL(input.toLowerCase());
    return url.pathname.endsWith('.jpg')
        || url.pathname.endsWith('.png')
        || url.pathname.endsWith('.gif');
}