用javascript获取url图片？答案

【问题标题】：Get url image with javascript?用javascript获取url图片？
【发布时间】：2018-05-09 01:36:29
【问题描述】：

<article id="content">
  <img src="../anh-1.jpg">
  <img src="../anh-2.jpg">
  <img src="../anh-3.jpg">
</article>

如何用javascript获取三张图片的url？

【问题讨论】：

到目前为止你尝试了什么？
“我想……”不是问题。

标签： javascript html dom

【解决方案1】：

var images = document.getElementsByTagName('img');

var urls = Array.prototype.slice.call(images).map(function(i) {
  return i.src;
})

console.log(urls);

<article id="content">
  <img src="../anh-1.jpg" />
  <img src="../anh-2.jpg" />
  <img src="../anh-3.jpg" />
</article>

【讨论】：

【解决方案2】：

您可以使用getElementById，以防您在不同的 id 中有多个嵌套图像。然后您可以使用getElementsByTagName 获取图像元素并使用for 循环循环这些元素并将src 存储在数组urls 中。

var elms = document.getElementById('content').getElementsByTagName('img');
var urls = [];
for (var i = 0; i < elms.length; i++) {
    urls.push(elms[i].src);
}
console.log(urls);

<article id="content">
    <img src="../anh-1.jpg">
    <img src="../anh-2.jpg">
    <img src="../anh-3.jpg">
</article>
<article id="content2">
    <img src="../anh-4.jpg">
    <img src="../anh-5.jpg">
    <img src="../anh-6.jpg">
</article>

【讨论】：

【解决方案3】：

  const images = document.getElementById('content')[0].children; // will give you an array of the <img/> elements

然后你可以访问它的 src 属性来获取 url。喜欢：

const url = images.map((img) => {
   console.log(img.src);
   return img.src;
});

【讨论】：