The browser won't return 1x images that are in different directory

Question

I'm using Angular and I'm trying to make my images retina responsive. I have an image component where I have the following code:

<picture>
    <source srcset="/src/webp/{{ img }}.webp 1x,
                    /src/images/{{ img }}-2x.png 2x,
                    /src/images/{{ img }}-3x.png 3x">
    <img src="/src/png/**/{{ img }}.png" class="{{ class }}" alt="{{ img_alt }}">
</picture>

Some of the images are made for 2x and 3x displays, but other images are not and these images that aren't are stored in another folder. When I open the app on 1x display all images are loaded properly, however when I open the app on 2x or 3x display the browser searches for all the images to be 2x and therefore for some of them is returned 404 (Not Found) error.

I need to know how should I make the browser search and get the 1x images that are in the other folder if there is no 2x or 3x image prepared.