页面展示图片时出现Undefined的原因及解决方法

问题根源 #

1. 初始images数组存储纯URL字符串，后续直接在该数组追加15个含title/source的对象，导致数组总长度变为30。前15项是字符串，访问images[i].title/images[i].source会返回undefined。
2. 分页计算基于总长度30生成，出现多余分页和无效元素。

修复方案 #

1. 重构图片数据结构 #

直接将原始URL数组转换为规范的对象数组，避免混合类型：

// 替换原URL数组和后续的for循环
const images = [
  "https://exoplanets.nasa.gov/internal_resources/1763/",
  "https://cdn.britannica.com/56/234056-050-0AC049D7/first-image-from-James-Webb-Space-Telescope-deepest-and-sharpest-infrared-image-of-distant-universe-to-date-SMACS-0723.jpg",
  "https://assets.newatlas.com/dims4/default/ac389ce/2147483647/strip/true/crop/1620x1080+150+0/resize/1200x800!/quality/90/?url=http%3A%2F%2Fnewatlas-brightspot.s3.amazonaws.com%2Farchive%2Funiverse-expanding-acceleration-1.jpg",
  "https://media.newyorker.com/photos/590966ee1c7a8e33fb38d6cc/master/w_2560%2Cc_limit/Nissan-Universe-Shouts.jpg",
  "https://www.thoughtco.com/thmb/NY5k_3slMRttvtS7mA0SXm2WW9Q=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/smallerAndromeda-56a8ccf15f9b58b7d0f544fa.jpg",
  "https://static.scientificamerican.com/sciam/cache/file/05B8482C-0C04-4E41-859DCCED721883D2_source.jpg?w=590&h=800&7ADE2895-F6E3-4DF4-A11F51B652E9FA88",
  "https://qph.cf2.quoracdn.net/main-thumb-66277237-200-huqebnzwetdsnnwvysbxemlskpcxnygf.jpeg",
  "http://www.pioneertv.com/media/1090/hero_shot_1080x720.jpg?anchor=center&mode=crop&width=600&height=400&rnd=133159257140000000",
  "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRSWFW1EpMNFM5-dbZEUUnzJkzT3KbUCeuhPHx_eseFCpPeX4Q_DIVPopjS0LeKVmKdQho&usqp=CAU",
  "https://cdn.mos.cms.futurecdn.net/rwow8CCG3C3GrqHGiK8qcJ.jpg",
  "https://static.wixstatic.com/media/917d103965314e2eacefed92edb6492c.jpg/v1/fill/w_640,h_356,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/917d103965314e2eacefed92edb6492c.jpg",
  "https://astronomy.com/~/media/A5B9B6CF36484AB9A6FFAE136C55B355.jpg",
  "https://discovery.sndimg.com/content/dam/images/discovery/fullset/2022/9/alien%20planet%20GettyImages-913058614.jpg.rend.hgtvcom.616.411.suffix/1664497398007.jpeg",
  "https://images.newscientist.com/wp-content/uploads/2017/06/21180000/planet-10-orange-blue-final-small.jpg?crop=16:9,smart&width=1200&height=675&upscale=true",
  "https://images.hindustantimes.com/img/2022/07/20/1600x900/Viral_Instagram_Planet_Rainbow_Nasa_1658316556293_1658316573815_1658316573815.PNG"
].map((url, index) => ({
  title: `Image ${index + 1}`,
  source: url
}));

此操作后，images数组仅含15个规范对象，无混合类型问题。

2. 优化渲染判断（可选） #

在showImages函数的渲染循环中，增加对象有效性判断，避免意外错误：

for (var i = offset; i < offset + perPage; i++) {
  const image = images[i];
  if (image && image.source && image.title) {
    var template = document.createElement('div');
    var title = document.createElement('p');
    var titleText = document.createTextNode(image.title);
    var img = document.createElement('img');
    
    template.classList.add('template')
    img.setAttribute("src", image.source);
    img.setAttribute('alt', image.title);

    title.appendChild(titleText);
    template.appendChild(img);
    template.appendChild(title);
    gallery.appendChild(template);      
  }
}

3. 验证分页逻辑 #

修正后数组长度为15，perPage=8时总页数为Math.ceil(15/8)=3，分页按钮和上下页逻辑会自动适配，无需额外修改。

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