Как я могу использовать расщепление, чтобы получить имя изображения из 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

Разбейте и получите последний элемент в массиве:

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