js实现图片路径中提取图片名称代码详解

图片可以说是所有网站中都一定会存在内容,那么对于图片的处理在前端开发中也需要根据具体情况来实现。

通常在网站中对于图片上传都需要传递图片名称,但用户在选取图片时可能会不能直接拿到图片名称。这个时候就需要我们通过现有的图片路径来提取出图片的名称。

文中分享一个公用方法通过对应的图片路径来提取出图片名称,如1.png、2.jpg等
extractImageNameFromUrl(url) {
// 使用正则表达式匹配文件名,包括可能的文件扩展名
const regex = /[^\/]+$/; // 匹配最后一个斜杠后的所有字符
const match = url.match(regex);
if (match) {
return match[0]; // 返回匹配到的文件名
}
return null; // 如果没有匹配到,返回null
}

extractImageNameFromUrl方法的使用

extractImageNameFromUrl('/img/img.jpg')
打印结果:
img.jpg

代码逻辑

    通过正则表达是提取路径最后一个斜杆后的所有数据,这也就以为着如果你在图片路径后面还携带有参数如时间戳这一类信息则不能提取出正确名称。

六月初字帖坊小程序 你想要的字帖模板及工具,这里都有!