En lugar de querySelector use querySelectorAll que devuelve una lista de nodos de todos los elementos que coinciden con el selector (no solo el primero).

Luego debe iterarlo sobre la lista de nodos.

 if (window.matchMedia("(max-width: 768px)").matches) { let itemList = [...document.querySelectorAll('.light-image')] itemList.forEach(el => el.src="/app/themes/piranha/assets/public/images/light-open.svg";) }

Ver esta publicación para más información

querySelector vs querySelectorAll

Su código actual funciona asumiendo que document.querySelector siempre devuelve un objeto HTMLImageElement único (y no null , no undefined ), con lo cual su código establece inmediatamente la propiedad .src .

Sin embargo, la función querySelectorAll devuelve un NodeList<TElement> , que es una colección iterable de elementos HTML en lugar de una referencia de objeto singular que acepta valores NULL.

Si proviene de un entorno jQuery, es posible que esté acostumbrado a cómo la función $('selector') de jQuery siempre devuelve una colección (envuelta) de elementos, pero tiene un diseño de API que le permite establecer propiedades y llamar a funciones miembro en todos los elementos de la colección como si el objeto devuelto representara un solo elemento.

... desafortunadamente, ese estilo de diseño de API (¿tiene un nombre?) Ya no se aplica ( _{buen viaje ...} ), por lo que debe estar familiarizado con la forma en que las referencias de objetos singulares (escalares) se comparan con iterables.

En JavaScript moderno, cuando tiene una colección iterable, necesita usar for(of) para acceder, editar y trabajar con cada objeto de la colección, así:

(Cambié su selector a img.light-image para evitar que se devuelva inadvertidamente cualquier elemento que no sea <img/> ).

 if (window.matchMedia("(max-width: 768px)").matches) { const images = document.querySelectorAll('img.light-image'); // <-- `images: NodeList<HTMLImageElement>` for( const img of images ) { // <-- `img: HTMLImageElement` img.src = "/app/themes/piranha/assets/public/images/light-open.svg"; } }

En JavaScript antiguo y obsoleto (y especialmente no portátil ), como en los días en que teníamos que usar jQuery, era común usar la función de miembro .forEach para iterar sucintamente a través de una colección; sin embargo, esto es imprudente, inseguro y simplemente pasado ahora; es decir, porque .forEach no está bien definido: por ejemplo, NodeList<T>.forEach no está estandarizado ni en ninguna especificación formal, según la MDN.

Una idea mejor:

Dato curioso: ¡no necesitas JavaScript!

Lo que está tratando de lograr se puede lograr usando solo CSS:

Elimine su secuencia de comandos y abra su archivo .css (o elemento <style> en línea) y coloque esto en su lugar:

Vea aquí: ¿Es posible establecer el equivalente de un atributo src de una etiqueta img en CSS?

 @media screen and (max-width: 768px) { img.light-image { content: url("/app/themes/piranha/assets/public/images/light-open.svg") } }