列表项显示[object HTMLImageElement]而非图片的技术问题求助

架构老林

2026-5-9

问题分析与解决方案

问题根源

你遇到的[object HTMLImageElement]显示问题，核心原因是当你把DOM元素对象和字符串进行拼接时，JavaScript会自动调用该元素的toString()方法，而DOM元素的默认toString()返回值就是"[object HTMLImageElement]"，所以最终innerHTML里插入的是这个字符串，而非图片的HTML结构。另外原代码里document.body.appendChild(oImg)是多余的——这会把图片额外添加到body末尾，建议删掉。

解决方案一：直接操作DOM节点（推荐）

这种方式更符合DOM操作的最佳实践，避免字符串拼接带来的问题：

function story() {
  const inputVal = document.getElementById("area").value;
  if (inputVal === "salwa") {
    // 创建img元素
    const oImg = document.createElement("img");
    oImg.setAttribute('src', './images/logo.png');
    oImg.setAttribute('alt', 'na');
    oImg.setAttribute('height', '1px');
    oImg.setAttribute('width', '1px');
    
    // 创建li元素并插入img
    const li = document.createElement("li");
    li.appendChild(oImg);
    
    // 将li添加到story-result中
    document.getElementById("story-result").appendChild(li);
  } else {
    // 注意：请确认目标元素id是否为"li-result"，避免笔误
    document.getElementById("li-result").innerHTML += "<h1>no results</h1>";
  }
}

解决方案二：拼接HTML字符串（适合简单场景）

如果你更倾向于用innerHTML的方式，那直接生成img的HTML字符串即可，不需要创建DOM元素：

function story() {
  const inputVal = document.getElementById("area").value;
  if (inputVal === "salwa") {
    // 直接拼接img的HTML字符串
    const imgHtml = `<img src='./images/logo.png' alt='na' height='1px' width='1px'>`;
    document.getElementById("story-result").innerHTML += `<li>${imgHtml}</li>`;
  } else {
    document.getElementById("li-result").innerHTML += "<h1>no results</h1>";
  }
}