在使用 API 实现图片弹出框功能时,需要获取图片的路径。如果图片路径不正确,图片将无法显示或者显示错误。这里给出一个示例代码,来演示如何正确获取图片的路径。
HTML 代码:
JS 代码:
// 找到所有需要弹出的图片
const popups = document.querySelectorAll('.popup-trigger');
// 循环绑定点击事件
for (const popup of popups) {
popup.addEventListener('click', function(e) {
e.preventDefault();
// 找到当前点击的图片
const img = this.parentNode.querySelector('img');
// 获取图片的路径
const src = img.getAttribute('src');
// 在弹出框中显示图片
// ...
});
}
这个示例代码中,首先使用 querySelectorAll
方法获取所有的弹出触发器。然后使用循环和 addEventListener
方法为每个触发器绑定点击事件。在点击事件中,首先找到对应的图片元素,然后使用 getAttribute
方法获取图片的 src
属性,最后在弹出框中显示图片。