Как: Javascript получить имя файла по клику без пути и вставить его в новую ссылку на изображение?

Question

Идея состоит в том, что посетитель нажимает на миниатюру, и открывается модальное окно с большим изображением.Я пытаюсь получить имя файла onClick (когда посетитель нажимает на изображение), а затем я хотел бы вставить его в ссылку открытого теперь модального окна, чтобы показать увеличенное изображение.Пока что я только что создал модал для каждого изображения, но это становится нелепо долго.

Это то, что я пробовал сейчас:

Это изображение с тегом, чтобы открытьпокадрово.Изображение находится в папке с миниатюрами, и я хотел бы сохранить имя inst01.jpg в переменной.

<a href="#" data-toggle="modal" data-target="#imageModal"><img class="img-fluid" src="/images/thumbs/inst01.jpg" onclick="getName()"></a> 

Это модальный режим.Исходное изображение находится в папке галереи, и я хотел бы вставить сохраненное имя файла inst01.jpg в ссылку, чтобы открыть исходное изображение:

<div class="modal fade" tabindex="-1" role="dialog" id="imageModal">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Image 1</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="container">
                        <img src="images/gallery/inst01sm.jpg" alt="" class="img-fluid">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

Я попытался в Google для функции JavaScript, и я пришелс этим:

function getName() {
     var fullPath = document.getElementById("img1").src;
     var filename = fullPath.replace(/^.*[\\\/]/, '');
     // or, try this, 
     // var filename = fullPath.split("/").pop();

    document.getElementById("result").value = filename;
 }

Но я понятия не имею, где я должен создать переменную имени файла, и при этом я не знаю, как создать функцию, которая вставила бы имя файла в другую ссылку, когда модальное окно открывается.

Надеюсь, понятно, что я хочу сделать.Спасибо за чтение и помощь.

Answer 1

Я не уверен, что следую тому, что ты пытаешься сделать, но я дал ему шанс.Я переименовал getName в setModalImageSrc и изменил его, чтобы взять текущее изображение в качестве параметра.Я вытаскиваю только имя изображения (игнорируя остальную часть пути) и использую его, чтобы установить модальный источник изображения, используя шаблон /images/gallery/${clickedImageName}sm.jpg.Если это не совсем верно, дайте мне знать, где мои предположения неверны, и я поправлюсь.

function setModalImageSrc(img) {
  const fullPath = img.src;
  const imageName = fullPath.match(/\w+(?=\.jpg$)/)[0];
  document.getElementById("imgModal").src = `/images/gallery/${imageName}sm.jpg`
 }

<a href="#" data-toggle="modal" data-target="#imageModal"><img class="img-fluid" src="/images/thumbs/inst01.jpg" onclick="setModalImageSrc(this)"></a> 

<div class="modal fade" tabindex="-1" role="dialog" id="imageModal">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Image 1</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="container">
                        <img id="imgModal" src="/images/gallery/inst01sm.jpg" alt="" class="img-fluid">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>