如何获取通过ng-src设置的图片URL中的文件名？

当然可以啦！不管用原生JavaScript还是Angular.js，都有很便捷的方式提取这个文件名，我给你分两种场景来介绍：

一、原生JavaScript方法 #

如果能直接拿到页面上的img元素，你可以这样做：

// 通过选择器获取目标img元素（比如根据ng-src属性定位）
const imgElement = document.querySelector('img[ng-src]');
// 注意：ng-src渲染后会转换成真实的src属性，所以这里取src就行
const imageUrl = imgElement.src;
// 分割URL路径，取最后一段就是文件名
const fileName = imageUrl.split('/').pop();
console.log(fileName); // 输出 Depositphotos_59984669_s-2015.jpg

如果你的URL带有查询参数（比如https://xxx.com/photo.jpg?size=large），可以用URL对象来更稳妥地处理：

const imageUrl = imgElement.src;
const urlObj = new URL(imageUrl);
// 先取路径部分，再分割提取文件名
const fileName = urlObj.pathname.split('/').pop();

二、Angular.js（1.x）方法 #

1. 控制器内直接处理 #

如果你的控制器里已经存了图片源的变量（比如$scope.imageUrl），直接写个小函数就能提取：

app.controller('YourController', function($scope) {
  $scope.imageUrl = 'https://example.com/path/to/Depositphotos_59984669_s-2015.jpg';
  
  // 定义提取文件名的函数
  $scope.extractFileName = function(url) {
    if (!url) return '';
    const urlObj = new URL(url);
    return urlObj.pathname.split('/').pop();
  };

  // 调用函数获取文件名
  const fileName = $scope.extractFileName($scope.imageUrl);
  console.log(fileName);
});

2. 自定义过滤器（适合在视图中复用） #

如果需要在多个视图里使用文件名提取功能，写个过滤器会更方便：

// 注册过滤器
app.filter('fileName', function() {
  return function(url) {
    if (!url) return '';
    const urlObj = new URL(url);
    return urlObj.pathname.split('/').pop();
  };
});

然后在HTML视图里直接用过滤器：

<!-- 显示文件名 -->
<p>图片文件名：{{ imageUrl | fileName }}</p>

补充说明：右键保存时看到的文件名，本质就是图片URL路径的最后一段（除非服务器通过Content-Disposition响应头强制指定了文件名，但普通场景下都是路径最后部分），所以上面的方法都能准确提取到你要的文件名。

内容的提问来源于stack exchange，提问作者zb22