Estoy tratando de anular dinámicamente todas las asignaciones de URL de IMG al redefinir la propiedad del objeto Image/HTMLImage. Intercepta correctamente las asignaciones, pero las nuevas URL no funcionan y parece que arruina la capacidad de img para funcionar normalmente.
¿Es posible hacer esto con algo más que defina la propiedad (por ejemplo, observador de mutación)?
(pps para mi caso de uso determinado, asignando this.srcset=e; funciona bien pero es feo)
<html> <body> <script> if(!window.once) { window.once = 1; Object.defineProperty( Image.prototype,'src',{configurable: true , get: function() { console.log(this.__src); return this.__src; } , set: function(e) { if(e.includes('replacemask')) { e='rep.jpg'; } this.__src=e; console.info('aaa:', e) } }); } var x = new Image; x.src="-.jpg"; document.body.append(x); </script> </body> </html>Primero debe extraer el setter y getters "originales" y llamarlos por su cuenta:
// get the original descriptor const desc = Object.getOwnPropertyDescriptor(HTMLImageElement.prototype, "src"); Object.defineProperty( HTMLImageElement.prototype, "src", { ...desc, get: function() { console.log(this.__src); // call the original getter return desc.get.call(this); }, set: function(e) { if (e.includes('replacemask')) { e = e.replace('replacemask', 'demonstration_1.png'); } // get the original setter desc.set.call(this, e); console.info('aaa:', e) } }); var x = new Image; x.src = "https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_replacemask"; document.body.append(x); Sin embargo, tenga en cuenta que esta no es la única forma de actualizar la fuente actual de HTMLImageElement. Tiene el setAttribute obvio, pero también los casos menos obvios srcset y <picture><source> .