如何使用分割从javascript中获取图像名称

Question

使用javascript我在制作（试图）当您单击缩略图时，会在对话框弹出窗口中显示完整版本的图像。

我想使用split方法将图像名称（face.jpg）从（images/face.jpg）中取出。现在，我的javascript在“images/face.jpg”前面应用了文本“lrg_”，它在我的图像文件夹被命名为“lrg_images”的情况下起作用，但我想按顺序将src修剪为“face.jpg”访问images文件夹内的“lrg_face.jpg”。我已经花了5个小时在这个画廊的问题，并没有时间。有什么想法吗？谢谢大家。

<div id="thumbs"> 
    <figure id="figure"> 
     <img src="images/face.jpg" alt="a tribalface"> 
     <img src="images/harley.jpg" alt="an image of Harley Quinn"> 
    </figure> 
</div> 

<dialog id="fullsize"> 
</dialog> 

<script>  
const showPic = document.getElementById("fullsize"); 
figure.addEventListener("click", function(e){ 

let pic = e.target; 
let imageSource = pic.href.split("")[1]; 
let picDescription = pic.alt; 
let picName = pic.getAttribute("src"); 
showPic.innerHTML = "<figure><img src=lrg_"+picName+" alt></figure>"; 
showPic.show(); 
console.log(imageSource); 
}); 
</script> 

Answer 1

拆分并获得数组中的最后一个元素：

const showPic = document.getElementById("fullsize"); 
 
figure.addEventListener("click", function(e) { 
 

 
    let pic = e.target; 
 
    let imagePathArry = pic.src.split("/"); //Split at '/' 
 
    let imageSource = imagePathArry[imagePathArry.length - 1] //get element at last index 
 
    let picDescription = pic.alt; 
 
    let picName = pic.getAttribute("src"); 
 
    showPic.innerHTML = "<figure><img src=lrg_" + picName + " alt></figure>"; 
 
    //showPic.show(); 
 
    console.log(imageSource); 
 
});

<div id="thumbs"> 
 
    <figure id="figure"> 
 
    <img src="images/face.jpg" alt="a tribalface"> 
 
    <img src="images/harley.jpg" alt="an image of Harley Quinn"> 
 
    </figure> 
 
</div> 
 

 
<dialog id="fullsize"> 
 
</dialog>

Answer 2

您需要传递要分割的字符。

var parts = picName.split("/")[1]; 
var name = parts[parts.length-1]; 

Answer 3

看起来你需要这样的东西。

var path = "full/path/to/images/face.jpg"; 
var pathParts = path.split("/"); 
var file = pathParts[pathParts.length - 1]; 
console.log(file);