React中如何将图片URL数组转为react-image-gallery所需对象数组

你可以使用JavaScript数组的map()方法，遍历从Flask后端获取的URL数组，将每个URL转换为react-image-gallery需要的对象结构：

代码示例 #

假设你从后端获取的数组名为imageUrls：

// 从Flask后端获取的原始URL数组
const imageUrls = ["www.example.com", "www.example2.com", "www.example3.com"];

// 转换为react-image-gallery所需的格式
const images = imageUrls.map(url => ({
  original: url,
  thumbnail: `${url}/thumbnail`
}));

说明 #

• map()方法会遍历数组中的每一个元素，对每个元素执行回调函数，最终返回一个新的对象数组。
• 模板字符串${url}/thumbnail用于拼接缩略图URL，确保每个缩略图路径是原URL后追加/thumbnail。

额外优化（可选） #

如果原URL可能存在末尾带斜杠的情况（比如www.example.com/），直接拼接会导致www.example.com//thumbnail，可以用URL对象来处理，避免重复斜杠：

const images = imageUrls.map(url => {
  const originalUrl = new URL(url);
  const thumbnailUrl = new URL('thumbnail', originalUrl);
  return {
    original: originalUrl.href,
    thumbnail: thumbnailUrl.href
  };
});

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