onclick="copy(this)"失效 JS复制图片src返回undefined或复制最后一行问题

10行数据的表格，需要实现点击每行复制按钮时，复制当前行内图片的src属性值。实际运行逻辑异常：复制结果要么是表格最后一行图片的src，要么为undefined，全程无控制台报错。

HTML结构 #

<table class="table table-striped">
    <tbody>
        @foreach($medias as $media)
            <tr>
                <td class="align-middle">{{ $media->id }}</td>
                <td class="align-middle"><img src="{{ asset('storage/'.$media->image) }}" class="image" alt="image" width="100" height="50"></td>
                <td class="align-middle">
                    <form action="{{ route('admin.medias.destroy', $media->id) }}" method="post">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger btn-sm">del</button>
                    </form>
                </td>
                <td class="align-middle"><a onclick="copy(this)" class="btn btn-sm btn-info">copy</a></td>
            </tr>
        @endforeach
    </tbody>
</table>

JS逻辑 #

<script>
    function copy () {
        navigator.clipboard.writeText(document.getElementsByClassName('image').src);
    }
</script>

• document.getElementsByClassName('image')返回的是页面所有class为image的元素集合，不是单个DOM元素，直接访问集合的src属性本身就是错误写法：
  • 部分浏览器会默认返回集合最后一个元素的src值，对应「复制到最后一行图片地址」的现象
  • 部分浏览器下集合对象本身不存在src属性，取值结果就是undefined
• 代码没有限定DOM查找范围为当前点击按钮所在的行，无法匹配到对应行的目标图片。

HTML中onclick="copy(this)"已经把当前点击的按钮元素作为参数传入函数，只需要在JS中接收该参数，向上定位到当前行，再在当前行范围内查找目标图片即可，修复后的JS代码如下：

<script>
function copy(currentBtn) {
    // 定位当前按钮所在的表格行
    const currentRow = currentBtn.closest('tr');
    // 仅在当前行范围内查找目标图片
    const targetImg = currentRow.querySelector('.image');
    // 执行复制操作
    navigator.clipboard.writeText(targetImg.src);
}
</script>

可选优化：可以给navigator.clipboard.writeText加then/catch回调，处理复制成功/失败的提示逻辑，不影响核心功能。

内容的提问来源于stack exchange，提问作者Mahmoud Khosravi