How do I change all images with the name x.png with x.png with Tampermonkey or Stylish?

I'm currently making a dark theme for my local router, the images it uses are terrible, I want to replace them, but they are added with JavaScript, after lots of research with Tampermonkey/Greasemonkey and also Stylish, I couldn't find any way to do it.

Only idea I had was replace images with the file name say wan_up.png with another image.

Solution

Use CSS in Stylish or similar extension.

#your-selector-here {
    height: 0 !important;
    width: 0 !important;
    /* these numbers match the new image's dimensions */
    padding-left: 32px !important;
    padding-top: 32px !important;
    background: url(http://example.com/your/image/here) no-repeat !important;
    background-size: 32px 32px; /* modern CSS property to scale the new image */
}

Use MutationObserver API to alter the image element before it's shown.

There are many wrappers for MutationObserver, here's an example based on setMutationHandler:

// ==UserScript==//
// @name           Replace image
// @match          http://192.168.0.1/*
// @run-at         document-start
// @require        https://greasyfork.org/scripts/12228/code/setMutationHandler.js
// ==/UserScript==

setMutationHandler({
    processExisting: true,
    selector: 'img[src*="wan_up"]',
    handler: images => images.forEach(img => {
        img.src = 'http://foo/bar.png';
    })
});

Edit the URL in @match, selector for the image to replace, new image URL accordingly.