如何将带ID的Image元素存入变量并正常访问？解决[object Object]问题

嘿，我来帮你搞定这个问题～

首先咱们先拆解下你遇到的两个核心问题：

1. 变量里存的是jQuery对象，直接输出就会显示[object Object]
2. 你设置的src是空的base64字符串，这肯定没法加载出图片呀

问题根源分析 #

你的代码里var image = $("#image").attr("src", "data:image/jpeg;base64,");这行，$("#image").attr()方法本身返回的是jQuery包装后的元素对象，不是图片的DOM元素本身，也不是图片的src值。所以你把这个对象赋值给image变量，后续如果直接输出这个变量，就会看到[object Object]。而且你给src传的是空的base64，浏览器根本没法解析出图片内容。

正确的实现方式 #

第一步：正确获取图片元素并存入变量

根据你的需求，有两种存储方式：

• 存jQuery对象（推荐，方便后续用jQuery方法操作）：

  var $image = $("#image"); // 习惯加$前缀区分jQuery对象，一目了然
  

• 存原生DOM元素（如果需要用原生JS的属性/方法）：

  var image = $("#image")[0]; 
  // 或者用.get(0)：var image = $("#image").get(0);
  

第二步：设置有效的图片src

你得给src传一个有效的base64图片字符串，空的base64肯定显示不了图片。下面是修正后的完整代码：

HTML部分：

<img width="100" height="100" id="image" alt="测试图片"/>

JavaScript部分：

function myTest() {
  // 先获取jQuery对象并存入变量
  var $image = $("#image");
  
  // 这里替换成你自己的有效base64图片字符串，下面是一个示例的小图片base64
  var validBase64 = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QAiRXhpZgAATU0AKgAAAAgAAQESAAMAAAABAAEAAAAAAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAABAAEDAREAAhEBAxEB/8QAFAABAAAAAAAAAAAAAAAAAAAACf/EABQQAQAAAAAAAAAAAAAAAAAAAAD/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwDk0AQAAAAAAAAAAAAAAAAAAAADIE3H/2Q==";
  
  // 给图片设置src属性
  $image.attr("src", validBase64);
  
  // 如果你需要操作原生DOM元素，比如获取原生的src属性
  var nativeImage = $image[0];
  console.log("原生元素的src：", nativeImage.src);
}

// 调用函数执行
myTest();

额外小提示 #

• 如果你只是想获取图片的src值，而不是设置，应该用$image.attr("src")（不带第二个参数），这样返回的就是字符串类型的src值，不会是对象。
• 直接输出jQuery对象时，浏览器会显示[object Object]，这是正常的，因为它是一个包装对象，不是原始值。你可以通过jQuery的方法或者转成原生元素来操作它。

内容的提问来源于stack exchange，提问作者Godymn