如何：Javascript在没有路径的情况下点击获取文件名并将其插入到新的图像链接中？

这个想法是访问者点击一个缩略图，打开一个模式，显示更大的图像。我试图获得文件名onClick（当访问者单击图像时），然后我想将其插入到现在打开的模式的链接中，以显示更大的图像。到目前为止，我只是为每个图像创建了一个模式，但这太长了

到目前为止，我已经尝试过：

这是带有打开模式的标记的图像。图像位于缩略图文件夹中，我想将名称inst01.jpg保存到一个变量中

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

但是我不知道我必须在哪里创建filename变量，也不知道如何创建函数，在模态打开时将文件名插入到另一个链接中

我希望我想做的事情很清楚。

---

感谢您阅读到目前为止的内容并提供帮助。

我不确定是否遵循了您的意图，但我尝试了一下。我将

getName

重命名为

setModalImageSrc

，并将其更改为将当前图像作为参数。我只提取图像名称（忽略路径的其余部分），并使用模式

/images/gallery/${clickedImageName}sm.jpg

使用它设置模式图像源。如果这不太正确，让我知道我的假设哪里错了，我会调整

函数setModalImageSrc（img）{
const fullPath=img.src；
const imageName=fullPath.match（/\w+（？=\.jpg$）/）[0]；
document.getElementById（“imgModal”）.src=`/images/gallery/${imageName}sm.jpg`
}

图1
&时代；
接近

不，遗憾的是，这不起作用，尽管我想你明白我要实现的目标。模态现在什么也没显示。根本没有图像（甚至没有断开的图像链接）。我只是注意到模态图像src应该是

/images

，而不是

images

，我没有在上面编辑这个。它现在正在工作。我输入代码是为了学习，但拼错了一些东西。现在可以了。非常感谢。你能用一句话解释一下这是怎么回事吗。我熟悉html和css，但从未深入研究过javascript。据我所知，该功能是在单击图像时触发的，对吗？但是为什么创建或加载新的src链接只需要id（imgModal）？onclick事件通过

setModalImageSrc（this）

调用，其中

this

是当前图像，作为

img

参数传入。我们找出图像名称，然后使用预先确定的模式将其映射到画廊图像。有意义吗？我理解脚本（除了模式，但没关系）。我不明白的是，为什么我可以在结束body标记之前嵌入脚本，而图像上的onClick仍然有效。我认为，由于浏览器自上而下地浏览html代码，它会在知道脚本文件存在之前尝试解释onClick事件。

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

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