如何提取IMG标签的SRC属性值到数组？已尝试代码未成功

需求 #

将class为cc的div下所有img标签的src属性值提取到数组，目标格式示例：

var images = ['img1.png', 'img2.png', 'img3.png']

目标HTML结构 #

<div class="cc">
<img class='content-image' src="./img1.png" alt="">
<img class='content-image' src="./img2.png" alt="">
<img class='content-image' src="./img3.png" alt="">
<img class='content-image' src="./img4.png" alt="">
<img class='content-image' src="./img5.png" alt="">
</div>

错误代码及问题 #

错误代码：

var images = []; const interactImg2 = document.querySelector('.cc'); [...interactImg2.querySelectorAll('img[src]')].forEach(img => images.push(new Image('img[src]')));

问题：数组中存入的是Image对象（显示为Image1、Image2等），而非预期的src字符串。原因是new Image()会创建新的图片DOM对象，不是提取现有img元素的src属性值。

正确解决方案 #

方案一：forEach遍历收集 #

var images = [];
const ccDiv = document.querySelector('.cc');
// 遍历所有带src属性的img元素
[...ccDiv.querySelectorAll('img[src]')].forEach(img => {
  // 直接访问img的src属性
  images.push(img.src);
  // 如果只需要文件名（去掉./前缀），替换为：
  // images.push(img.src.split('/').pop());
});

方案二：map简洁实现 #

const ccDiv = document.querySelector('.cc');
// 用map直接转换为src数组
const images = [...ccDiv.querySelectorAll('img[src]')].map(img => img.src);
// 若仅需文件名：
// const images = [...ccDiv.querySelectorAll('img[src]')].map(img => img.src.split('/').pop());

关键说明 #

• 直接访问img元素的src属性即可获取其属性值，浏览器会自动将相对路径解析为绝对路径；如果只需要相对路径中的文件名，用split('/').pop()截取最后一段即可。
• 原代码中new Image('img[src]')是错误用法，这个方法是用来创建新图片对象的，和提取现有元素属性无关。

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