Get the filename of an image setting by ng-src

Question

Is there a way to get the filename of an image that I set with ng-src from a url?

My image tag looks like this:

  <img ng-src="{{imageSrc}}" width="400" height="400" />

And in my controller I set the image source of a url like this:

      $scope.imageSrc = "https://firebasestorage.googleapis.com/v0/b/work-52105.appspot.com/o/user%2FwCBsmRGAxbMQXO2yqc8jF65pmIG3%2FDepositphotos_59984669_s-2015.jpg?alt=media&token=916f8bb6-2ccf-4a95-b76b-814db081c028";

When I right click on the image to save it, I can see its file name: Depositphotos_59984669_s-2015.jpg

Is there a way to get or extract the file name easily with JS or with Angular.js?

Thank you.

since you are setting the image, you should already have the url — Sajeetharan, Feb 04 '18 at 19:09
I want to get its name only which is Depositphotos_59984669_s-2015.jpg and assign it to a variable for example — zb22, Feb 04 '18 at 19:10

score 0 · Accepted Answer · answered Feb 04 '18 at 19:22

I made a few assumptions:

The file name starts after a slash (either / or its decoded version, %2F)
It ends on the first question mark.
The image has a JPG format (although you can be easily modify it in the regex).

If all three are satisfied, you can use this regex on the URL:

(?:.+(?:\/|%2F))+?([^\/]+\.jpg)(?=\?)

Note that the first group contains the file's name.

Get the filename of an image setting by ng-src

1 Answers1