如何在页面中显示第一张图片的URL并替代alert输出内容？

核心思路是替换弹窗逻辑，改为将图片URL直接输出到页面中，具体实现如下：

示例实现代码 #

假设你的基础HTML结构包含图片元素：

<img src="https://example.com/first-pic.jpg" alt="测试图片1">
<img src="https://example.com/second-pic.jpg" alt="测试图片2">
<!-- 可以预先准备一个容器用于显示结果 -->
<div id="img-url-result"></div>

对应的JavaScript代码修改为：

// 获取页面中第一张图片元素
const firstImage = document.querySelector('img');
// 提取图片的URL
const imageUrl = firstImage.src;

// 将结果输出到页面指定容器中
document.getElementById('img-url-result').textContent = `第一张图片的URL：${imageUrl}`;

// 如果没有预先准备容器，也可以直接创建元素并追加到页面
// const resultElement = document.createElement('p');
// resultElement.textContent = `第一张图片的URL：${imageUrl}`;
// document.body.appendChild(resultElement);

关键说明 #

• document.querySelector('img')会返回页面中第一个匹配的<img>元素，确保获取的是第一张图片
• 可以选择预先在HTML中定义结果容器（如示例中的#img-url-result），也可以动态创建元素插入页面，按需选择即可

内容的提问来源于stack exchange，提问作者top-source