JS获取img的src详解

一、JS获取img的src值

在Web开发中，经常需要获取图片的地址，以实现一些预处理或统计工作，此时就需要获取img元素的src值。

我们可以通过获取图片元素并访问其src属性来获取图片的地址：

let img = document.getElementById('myImage');
let imgSrc = img.src;
console.log(imgSrc);

上述代码中，我们通过getElementById获取id为myImage的img元素，并通过访问其src属性获取图片地址，并将其保存在imgSrc变量中。

二、JS获取img标签的src

虽然和上一个标题类似，但本小节指的是直接获取img标签中的src属性值，而不是获取通过DOM操作获取img元素后的src属性值。

我们可以通过getAttribute方法获取img标签的src：

let imgSrc = document.getElementById('myImage').getAttribute('src');
console.log(imgSrc);

上述代码中，我们通过getElementById获取id为myImage的img元素，并通过getAttribute方法获取img标签的src，并将其保存在imgSrc变量中。

三、JS获取img的src属性

有时候，我们需要获取img元素的src属性本身，这时可以用getAttribute方法获取src属性：

let imgSrcAttr = document.getElementById('myImage').getAttributeNode('src').value;
console.log(imgSrcAttr);

上述代码中，我们通过getAttributeNode获取img元素的src属性节点，并通过value属性获取其值，并将其保存在imgSrcAttr变量中。

四、JS获取img的宽高

有时候需要获取图片的宽高，这时可以通过width和height属性获取：

let img = document.getElementById('myImage');
let width = img.width;
let height = img.height;
console.log('宽：' + width + '，高：' + height);

上述代码中，我们通过getElementById获取id为myImage的img元素，并通过width和height属性获取其宽高，并将其分别保存在width和height变量中。

五、JS怎么获取img的src

有三种方式可以获取img的src：

1. 直接获取img元素的src属性值：

let imgSrc = document.getElementById('myImage').src;
console.log(imgSrc);

2. 通过getAttribute方法获取img标签的src属性值：

let imgSrcAttr = document.getElementById('myImage').getAttribute('src');
console.log(imgSrcAttr);

3. 通过getAttributeNode方法获取img元素的src属性节点：

let imgSrcAttrNode = document.getElementById('myImage').getAttributeNode('src').value;
console.log(imgSrcAttrNode);

六、JS获取img的file

如果我们需要上传图片，那么就需要获取img的file对象，而不是其src属性值。可以使用input元素或者new FileReader()方法获取该对象：

let input = document.getElementById('fileInput');
let file = input.files[0];
console.log(file);

上述代码中，我们通过id获取input元素，并通过files属性获取其文件列表，从中获取第一个文件并保存在file变量中。

七、JS获取img的宽高为0

有时候，使用JS获取img的宽高可能会出现0的情况，这是因为图片没有加载完成，可以采用以下方法解决：

1. 使用window.onload事件：

window.onload = function() {
    let img = document.getElementById('myImage');
    let width = img.width;
    let height = img.height;
    console.log('宽：' + width + '，高：' + height);
}

2. 使用img元素的onload事件：

let img = document.getElementById('myImage');
img.onload = function() {
    let width = img.width;
    let height = img.height;
    console.log('宽：' + width + '，高：' + height);
}

八、JS获取div里的img

有时候我们需要获取div等元素中的img标签，可以使用querySelectorAll方法获取所有img元素：

let imgList = document.querySelectorAll('div img');
for (let i = 0; i < imgList.length; i++) {
    console.log(imgList[i].src);
}

上述代码中，我们通过querySelectorAll方法获取div元素中的所有img元素，并使用循环遍历所有的img元素，输出其src属性值。