正文

掌握JavaScript获取图片地址的5种简单方法

/0 浏览量
0715

在Web开发中，有时候我们需要获取图片的地址，比如在动态生成图片链接或者进行图片处理时。以下是通过JavaScript获取图片地址的五种简单方法，它们可以帮助你轻松实现这一目标。

方法一：通过<img>标签的src属性

这是最直接的方法，通过访问<img>标签的src属性就可以获取图片的地址。

var imgElement = document.querySelector('img');
var imgSrc = imgElement.src;
console.log(imgSrc); // 输出图片地址

方法二：使用document.createElement

如果你想动态创建一个<img>标签，可以使用document.createElement方法。

var img = document.createElement('img');
img.src = 'https://example.com/path/to/image.jpg';
var imgSrc = img.src;
console.log(imgSrc); // 输出图片地址

方法三：通过<img>标签的style属性

如果图片的src属性被设置为空，图片的地址可能会从其style属性的background-image中获取。

var imgElement = document.querySelector('img');
var imgStyle = window.getComputedStyle(imgElement);
var imgSrc = imgStyle.backgroundImage.slice(5, -2); // 去除 'url(")' 和 '")'
console.log(imgSrc); // 输出图片地址

方法四：使用fetch API

fetch API可以用来获取资源，包括图片。你可以使用它来获取图片的地址。

fetch('https://example.com/path/to/image.jpg')
  .then(response => response.blob())
  .then(blob => {
    var imageUrl = URL.createObjectURL(blob);
    console.log(imageUrl); // 输出图片的URL
  });

方法五：通过data:image URL

某些情况下，图片可能直接被嵌入到HTML中，你可以通过data:image URL来访问这些图片。

var imgElement = document.querySelector('img');
var imgData = imgElement.getAttribute('src');
console.log(imgData); // 输出图片的data:image URL

以上五种方法涵盖了大多数通过JavaScript获取图片地址的场景。根据实际情况选择合适的方法，可以让你更加高效地处理图片相关的任务。

-- 展开阅读全文 --