Как я могу использовать split для получения имени изображения из src в javascript

Question

Использование javascript Я делаю (пытается) полную версию изображения, появляющуюся в диалоговом окне, когда вы нажимаете на миниатюру.

Я пытаюсь получить изображение (face.jpg) из (images/face.jpg) с использованием метода split. Прямо сейчас мой javascript применяет текст «lrg_» перед «images/face.jpg», который работает, если моя папка с изображениями была названа «lrg_images», но я хотел бы обрезать src до «face.jpg», чтобы для доступа к «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

Split и получить последний элемент в массиве:

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);