js 获取图片对象

在JavaScript中获取图片对象通常有以下几种方式：

一、基本概念

HTMLImageElement对象
- 当在HTML中使用<img>标签创建图片元素时，在JavaScript中可以通过多种方式获取到这个图片对象并进行操作。这个对象包含了图片相关的属性和方法，例如src（图片源地址）、alt（替代文本）、width（宽度）、height（高度）等属性，以及load（加载事件）和error（错误事件）等方法。

二、获取类型及示例

通过元素的ID获取
- 如果在HTML中有如下定义：
- 如果在HTML中有如下定义：
- 在JavaScript中可以使用document.getElementById方法获取图片对象：
- 在JavaScript中可以使用document.getElementById方法获取图片对象：

通过查询选择器获取（适用于多个图片元素的情况）
- 假设HTML中有多个图片元素：
- 假设HTML中有多个图片元素：
- 在JavaScript中可以使用document.querySelectorAll方法获取所有具有特定类名的图片元素集合（NodeList），然后遍历操作：
- 在JavaScript中可以使用document.querySelectorAll方法获取所有具有特定类名的图片元素集合（NodeList），然后遍历操作：
通过表单元素中的文件输入获取（处理用户上传的图片）
- 在HTML中有文件输入元素：
- 在HTML中有文件输入元素：
- 在JavaScript中可以监听文件输入的变化事件，然后获取到File对象，再通过URL.createObjectURL将其转换为可用于显示的图片对象：
- 在JavaScript中可以监听文件输入的变化事件，然后获取到File对象，再通过URL.createObjectURL将其转换为可用于显示的图片对象：

三、应用场景

图片预加载
- 在页面加载之前预先加载图片，可以提高用户体验。通过获取图片对象并设置其src属性，浏览器会在后台加载图片。
- 在页面加载之前预先加载图片，可以提高用户体验。通过获取图片对象并设置其src属性，浏览器会在后台加载图片。

图片轮播效果
- 在轮播组件中，需要获取多个图片对象，然后按照一定的时间间隔切换显示不同的图片。
动态修改图片属性
- 根据用户的操作或者页面的状态，动态地修改图片的src、width、height等属性。例如，当用户点击按钮时切换图片：
- 根据用户的操作或者页面的状态，动态地修改图片的src、width、height等属性。例如，当用户点击按钮时切换图片：

四、可能遇到的问题及解决方法

图片加载失败（img对象状态异常）
- 原因：
  - 图片的src属性指定的路径错误，导致无法找到图片文件。
  - 网络问题，例如服务器无法访问或者网络连接中断。
  - 图片格式不被浏览器支持。
- 解决方法：
  - 检查src属性的值是否正确，确保路径是相对于HTML文件的正确路径或者是有效的绝对URL。
  - 对于网络问题，可以在图片对象的error事件中添加处理逻辑，例如显示默认图片或者提示用户重新加载页面。
  - 确保使用的图片格式是浏览器支持的常见格式，如JPEG、PNG、GIF等。
- 示例代码（处理加载失败情况）：
- 示例代码（处理加载失败情况）：

获取不到图片对象
- 原因：
  - 在JavaScript代码执行获取图片对象的操作时，HTML中的图片元素可能还没有被加载完成。例如，在<head>标签中的脚本尝试获取<body>中的图片元素。
  - 选择器使用错误，没有正确匹配到图片元素。
- 解决方法：
  - 将JavaScript代码放在<body>标签的底部，确保在执行脚本时HTML元素已经加载完成。或者使用window.onload事件来确保在页面完全加载后再执行获取图片对象的操作。
  - 仔细检查查询选择器的表达式是否正确，例如类名、ID名的拼写是否正确。
- 示例代码（使用window.onload）：
- 示例代码（使用window.onload）：