如何使用分割從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);