How to get img src in JS if its in svg?

Question

I'm creating online application and I want to figure out in js what source do I have for image - png or svg.

I'm creating img tag:

            var url; //url to icon without extension, like `/img/icon`

            var img = new Image();

            img.crossOrigin = 'Anonymous';
            img.onload = function () {

                //Here I want to know if src was png or svg
            };

            img.onerror = function () {


            };

            img.src = url;

Server serves svg for the url if svg is available OR png if svg is not available.

I can see in network tab when svg is served, so there should be a way to get this info in js as well. Or at least to understand that image was server in svg format.

How do I know in onload event of Image in which format was source received?

Answer 1

You can get the src onLoad by reference. Then split the string and look for svg at the end.

<img 
  src='www.awesomesite.com/awesomeImage.svg'
  ref={el => this.imageRef = el}
  onLoad={() => console.log(this.imageRef.src) }
/>