嘿，我明白你现在遇到的困扰啦！页面上没显示出想要的图片，反而出现了[Object HTMLImage Element]这段文字，问题其实出在你处理Image对象的方式上，咱们来一步步修正：

问题根源 #

你在数组里存储的是Image类型的对象，但在next函数中，你用了：

item.textContent = items[currentItem];

当你把一个对象直接赋值给元素的textContent属性时，JavaScript会自动把这个对象转换成字符串形式，也就是你看到的[Object HTMLImage Element]，这可不是咱们要的图片效果哦。

修正方案 #

把赋值文本的代码改成将Image元素添加为div的子节点，也就是把上面那行代码替换成：

item.appendChild(items[currentItem]);

这样浏览器就会渲染出Image对象对应的图片，而不是把它转成字符串。

另外，作为小建议，给每个Image对象加上alt属性会更好，既能提升页面的可访问性，也能在图片加载失败时显示替代文本，比如：

items[0] = new Image();
items[0].src = "../images/bier%20tafe.jpeg";
items[0].alt = "Bier tafe"; // 添加alt属性

修改后的完整代码 #

let slideshow;
let currentItem = 0;
let items = [6];

items[0] = new Image();
items[0].src = "../images/bier%20tafe.jpeg";
items[0].alt = "Bier tafe";
items[1] = new Image();
items[1].src = '../images/pintjes.jpeg';
items[1].alt = "Pintjes";
items[2] = new Image();
items[2].src = '../images/flesjes.jpeg';
items[2].alt = "Flesjes";
items[3] = new Image();
items[3].src = '../images/grain.jpg';
items[3].alt = "Grain";
items[4] = new Image();
items[4].src = '../images/cigar.jpg';
items[4].alt = "Cigar";
items[5] = new Image();
items[5].src = '../images/whiskey.jpg';
items[5].alt = "Whiskey";

document.addEventListener('DOMContentLoaded', function(ev){
 slideshow = document.querySelector('.slideshow');
 slideshow.addEventListener('click', next);
 slideshow.dispatchEvent(new MouseEvent('click'));
});

function next(ev){
 ev.preventDefault();
 removeItem();
 let item = document.createElement('div');
 // 替换成appendChild添加图片元素
 item.appendChild(items[currentItem]);
 item.classList.add("slideshow-item");
 slideshow.appendChild(item);
 setTimeout(function(){
 item.classList.add('active');
 }, 20);
 currentItem++;
 if(currentItem > items.length-1){
 currentItem = 0;
 }
}

// 补充removeItem函数的实现（如果之前未定义）
function removeItem() {
  const oldItem = slideshow.querySelector('.slideshow-item');
  if (oldItem) {
    oldItem.remove();
  }
}

这样修改后，页面应该就能正确显示你想要的图片啦！

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