JS获取img的src值详解

发布时间：2023-05-17

一、从jQuery获取img的src值

使用jQuery获取img的src值非常方便，只需要使用选择器选中img标签，然后调用attr()方法即可获取src属性的值。下面是代码示例：

// 选中img标签
var img = $("img");
// 获取src属性的值
var src = img.attr("src");

上述代码中，我们首先使用选择器选中了页面中的所有img标签，然后通过调用attr()方法获取了img标签的src属性的值。

二、使用纯JS获取img标签的src

如果不想引入jQuery库，也可以使用纯JS代码获取img标签的src属性的值。下面是代码示例：

// 选中img标签
var img = document.getElementsByTagName("img")[0];
// 获取src属性的值
var src = img.getAttribute("src");

上述代码中，我们使用了DOM方法getElementsByTagName()获取了页面中的所有img标签，然后通过选取第一个img标签并调用getAttribute()方法获取了它的src属性的值。

三、JS如何获取img的src

如果我们需要获取多个img标签的src属性的值，可以在纯JS的基础上稍作修改。下面是代码示例：

// 选中所有img标签
var imgs = document.getElementsByTagName("img");
// 循环获取每个img标签的src属性的值
for (var i = 0; i < imgs.length; i++) {
  var src = imgs[i].getAttribute("src");
  console.log(src);
}

上述代码中，我们使用了for循环来遍历所有的img标签，并通过getAttribute()方法获取了每个img标签的src属性的值。

四、使用jQuery获取img的src

除了使用纯JS获取img标签的src属性的值，我们还可以使用jQuery来完成相同的任务。下面是代码示例：

// 选中所有img标签
var imgs = $("img");
// 遍历获取每个img标签的src属性的值
imgs.each(function() {
  var src = $(this).attr("src");
  console.log(src);
});

上述代码中，我们使用了jQuery的选择器选中页面中的所有img标签，然后使用each()方法遍历每个img标签，并通过attr()方法获取它的src属性的值。

五、使用Vue获取img的src

如果我们需要在Vue中获取img标签的src属性的值，可以使用Vue的相关方法来实现。下面是代码示例：

<template>
  <div>
    <img ref="img" src="https://example.com/img.jpg" />
  </div>
</template>
<script>
export default {
  mounted() {
    var src = this.$refs.img.src;
    console.log(src);
  }
}
</script>

上述代码中，我们在Vue的template模板中渲染了一张图片，并在img标签上使用ref属性给它取了个名字。然后在Vue组件的mounted生命周期函数中，我们使用$refs获取img标签的引用，并通过src属性获取了它的src属性的值。

六、如何获取img的src值

获取img标签的src属性的值，有多种方法可以实现。除了上述的jQuery、纯JS和Vue方法外，我们还可以使用各种JS框架和库的相关方法来获取img标签的src属性的值。下面是代码示例：

// 在React中获取img的src值
var src = this.props.src;
// 在Angular中获取img的src值
var src = this.imageSrc.nativeElement.getAttribute("src");
// 在Ember中获取img的src值
var src = this.element.querySelector("img").getAttribute("src");
// 在Backbone中获取img的src值
var src = this.$("img").attr("src");

上述代码中，我们分别展示了在React、Angular、Ember和Backbone中获取img标签的src属性的值的方法。

七、JS获取img图片

如果我们需要在页面中使用JS加载图片，可以使用Image对象来实现。下面是代码示例：

// 创建Image对象
var image = new Image();
// 设置图片的src
image.src = "https://example.com/img.jpg";
// 图片加载完成的回调函数
image.onload = function() {
  console.log("图片加载完成");
}
// 图片加载出错的回调函数
image.onerror = function() {
  console.log("图片加载出错");
}

上述代码中，我们首先使用new关键字创建了一个Image对象，然后设置了它的src属性。在图片加载完成后，我们会调用onload回调函数，在图片加载出错时，会调用onerror回调函数。

八、JS获取src路径

除了获取img标签的src属性的值外，我们还可以通过一些方法来获取img标签对应的图片的路径。下面是代码示例：

// 创建Image对象
var image = new Image();
// 设置图片的src
image.src = "https://example.com/img.jpg";
// 获取图片的路径
var path = image.currentSrc;
console.log(path);

上述代码中，我们创建了一个Image对象，并设置了它的src属性。然后通过访问currentSrc属性，获取了img标签对应图片的路径。

九、JS获取div里的img

在某些情况下，我们需要获取某个div中的img标签。下面是代码示例：

// 选中要查找的div
var div = document.getElementById("myDiv");
// 查找div中的img标签
var img = div.getElementsByTagName("img")[0];
// 获取img的src属性的值
var src = img.getAttribute("src");

上述代码中，我们首先使用getElementById()方法选中了id为myDiv的div元素。然后使用getElementsByTagName()方法在div元素中查找img标签，并通过getAttribute()方法获取img标签的src属性的值。

推荐文章