JavaScript

用js请问一下。页面有15个img 我想从服务器获取数据然后添加进去图片。服务器图片分多。最好有分页功能。我该怎么做 ？

现在只能修改一个。请问怎么修改全部 ？

接口传参 页数 、 条数，返回对应的数据

基于new bing部分指引作答：
你可以使用JavaScript来实现从服务器获取数据并添加到页面的功能，并结合分页实现更好的用户体验。以下是一个简单的示例代码：

HTML部分：

<div id="image-container"></div>
<div id="pagination"></div>

JavaScript部分：

// 定义每页显示的图片数量和当前页码
const itemsPerPage = 5;
let currentPage = 1;

// 获取服务器数据的方法，这里使用假数据作为示例
function fetchData(page) {
  // 假设服务器返回的数据格式如下
  const serverData = {
    totalPages: 4, // 总页数
    images: [ /* 图片数组 */ ]
  };

  // 模拟异步请求，延时1秒钟返回数据
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(serverData);
    }, 1000);
  });
}

// 渲染图片列表
function renderImages(images) {
  const container = document.getElementById("image-container");
  container.innerHTML = ""; // 清空容器

  images.forEach((image) => {
    const imgElement = document.createElement("img");
    imgElement.src = image.url;
    container.appendChild(imgElement);
  });
}

// 渲染分页导航
function renderPagination(totalPages) {
  const pagination = document.getElementById("pagination");
  pagination.innerHTML = ""; // 清空导航

  for (let page = 1; page <= totalPages; page++) {
    const pageLink = document.createElement("a");
    pageLink.href = "#";
    pageLink.textContent = page;
    pageLink.addEventListener("click", () => {
      currentPage = page;
      fetchAndRenderData(currentPage);
    });
    pagination.appendChild(pageLink);
  }
}

// 从服务器获取数据并渲染到页面
function fetchAndRenderData(page) {
  fetchData(page)
    .then((data) => {
      renderImages(data.images);
      renderPagination(data.totalPages);
    })
    .catch((error) => {
      console.error("Error fetching data:", error);
    });
}

// 初始化页面，获取并渲染第一页的数据
fetchAndRenderData(currentPage);

在上面的代码中，我们首先定义了每页显示的图片数量 itemsPerPage 和当前页码 currentPage。然后，通过 fetchData 方法模拟从服务器获取数据的异步操作，返回一个包含总页数和图片数组的 Promise 对象。

接下来，使用 renderImages 方法将图片渲染到指定的容器中，并使用 renderPagination 方法渲染分页导航栏。

最后，在 fetchAndRenderData 方法中，通过调用 fetchData 方法获取数据，并调用 renderImages 和 renderPagination 方法进行渲染。同时，为分页导航中的每个页码链接添加点击事件，点击时更新当前页码并重新获取并渲染数据。

通过以上方式，你可以从服务器按需获取数据，并实现图片分页加载功能。当用户点击不同的页码时，会自动发送请求获取对应页的数据，并将数据渲染到页面中。

参考 https://blog.csdn.net/weixin_43963786/article/details/122324640

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/348660
• 我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：js 获取图片尺寸 Image对象取图片尺寸 Image对象
• 除此之外, 这篇博客: JavaScript 基础入门中的 img 图片 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:
  

  <img src="图片地址" width="宽度" title="鼠标在图片上悬停显示的文字" alt="图片走丢了">
  

• 以下回答来自chatgpt:

  根据参考资料，我将给出以下步骤来实现从服务器获取多个图片并添加到页面中的功能：

  1. 首先，根据页面上的15个img标签，使用JavaScript来获取这些标签，并将其存储在一个数组中。

  let imgTags = document.querySelectorAll('img');
  

  1. 接下来，要从服务器获取多个图片，可以使用XMLHttpRequest对象发送异步请求。

  let xhr = new XMLHttpRequest();
  xhr.open('GET', '服务器图片的URL', true);
  xhr.onload = function() {
    if (xhr.status === 200) {
      // 在这里处理获取到的图片数据
    } else {
      // 处理请求失败的情况
    }
  };
  xhr.send();
  

  1. 在请求成功的回调函数中，可以将获取到的图片数据添加到页面的img标签中。可以使用img的src属性来设置图片的路径。

  let images = JSON.parse(xhr.responseText); // 假设服务器返回的是一个包含图片路径的JSON数据数组
  for (let i = 0; i < images.length; i++) {
    imgTags[i].src = images[i].path; // 假设图片路径保存在对象的path属性中
  }
  

  1. 如果服务器上的图片被分成多个部分，并且需要实现分页功能，可以使用URL参数来指定获取的图片范围。例如，可以通过添加page参数来指定获取第几页的图片。

  let page = 1; // 获取第一页的图片
  xhr.open('GET', '服务器图片的URL?page=' + page, true);
  // ...
  

  1. 为了实现分页功能，可以在页面上添加翻页按钮，并在点击按钮时更新URL参数以获取不同页的图片。

  <button onclick="getNextPage()">下一页</button>
  

  let currentPage = 1;
  
  function getNextPage() {
    currentPage++;
    xhr.open('GET', '服务器图片的URL?page=' + currentPage, true);
    // ...
  }
  

  以上是一个基本的解决方案，具体的实现还需根据服务器返回的图片数据格式和分页方式进行调整。如果无法获取服务器图片的URL或服务器返回的数据格式不符合预期，可能需要进一步了解服务器端的API和数据结构，或者与服务端开发人员协商。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^