后端返回列表中包含图片id，如何将列表中的图片id转化成url

随风小薇2024-07-30 0:30

问题描述

如果我有一个列表数据，列表中每个对象都包含一个图片id，现在我需要将列表中的图片id转化成图片，然后再页面上显示出来

如果你有一个列表数据，列表中每个对象都包含一个图片 ID，并且你想将这些图片 ID 转化为实际的图片并在页面上显示，你可以按照以下步骤进行：

  1. 创建一个函数来获取图片 URL：根据图片 ID 调用后端接口获取实际的图片 URL。

  2. 遍历列表并处理每个对象：为列表中的每个对象调用获取图片 URL 的函数。

  3. 创建图片元素并设置源 ：使用获取到的图片 URL 设置新创建的 <img> 元素的 src 属性。

  4. 将图片添加到页面 ：将每个 <img> 元素添加到页面的适当位置。

以下是一个示例代码：

javascript 复制代码 
// 假设这是你的列表数据
const items = [
  { id: '1', imgId: 'image1Id' },
  { id: '2', imgId: 'image2Id' },
  // ...其他对象
];

// 假设这是获取图片 URL 的异步函数
async function fetchImageUrl(imgId) {
  try {
    const response = await fetch(`/api/images/${imgId}`);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    return data.imageUrl; // 假设接口返回的 JSON 中包含 imageUrl 字段
  } catch (error) {
    console.error('Fetching image URL failed:', error);
    return null; // 或者处理错误
  }
}

// 异步函数，用于处理列表并显示图片
async function displayImages(items) {
  const imagesContainer = document.getElementById('images-container'); // 假设你有一个容器元素

  for (const item of items) {
    // 获取图片 URL
    const imageUrl = await fetchImageUrl(item.imgId);
    if (imageUrl) {
      // 创建一个新的图片元素
      const imgElement = document.createElement('img');
      imgElement.src = imageUrl;
      imgElement.alt = `Image for item ${item.id}`;
      imgElement.style.width = '100px'; // 设置样式，根据需要修改

      // 将图片元素添加到容器
      imagesContainer.appendChild(imgElement);
    } else {
      // 处理无法获取图片的情况，例如显示一个默认图片或错误信息
      console.error(`Image URL could not be fetched for item ${item.id}`);
    }
  }
}

// 调用函数，传入列表数据
displayImages(items);

请注意，这个示例假设你有一个 HTML 容器元素，其 ID 为 images-container，你将把所有图片添加到这个容器中。

html 复制代码 
<div id="images-container"></div>

此外，fetchImageUrl 函数是异步的，因为它需要等待网络请求的响应。displayImages 函数也是异步的，因为它需要等待每个图片 URL 的获取。

确保你的后端 API 能够根据提供的 imgId 返回正确的图片 URL，并且你的前端环境支持 async/await 和 fetch API。如果你的环境不支持这些特性，你可能需要使用其他方法来实现异步请求和错误处理。

需要将图片url返回到列表中，然后再展示出来

如果你想要在获取图片 URL 后将它们放回列表中，然后基于这个更新后的列表在页面上展示图片，你可以按照以下步骤操作：

  1. 更新列表项：为每个列表项调用一个函数来异步获取对应的图片 URL，并更新列表项。

  2. 使用 Promise 处理异步操作 ：由于获取图片 URL 是异步的，使用 Promise.all 来等待所有图片 URL 都被成功获取。

  3. 更新 DOM ：一旦所有图片 URL 都被获取，遍历更新后的列表，并为每个项创建一个 <img> 元素，设置其 src 属性，然后将它们添加到页面上。

以下是如何实现它的示例代码：

javascript 复制代码 
// 假设这是你的初始列表数据，每个对象都包含一个图片 ID
const items = [
  { id: '1', imgId: 'image1Id', imageUrl: '' },
  { id: '2', imgId: 'image2Id', imageUrl: '' },
  // ...其他对象
];

// 假设这是获取图片 URL 的异步函数
async function fetchImageUrl(imgId) {
  try {
    const response = await fetch(`/api/images/${imgId}`);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    return data.imageUrl; // 假设接口返回的 JSON 中包含 imageUrl 字段
  } catch (error) {
    console.error('Fetching image URL failed:', error);
    return null; // 或者可以返回一个默认图片的 URL
  }
}

// 函数，用于更新列表项中的图片 URL 并返回一个包含所有更新项的 Promise
async function updateItemsWithImageUrls(items) {
  const imagePromises = items.map(async (item) => {
    const imageUrl = await fetchImageUrl(item.imgId);
    item.imageUrl = imageUrl; // 更新列表项
    return item;
  });

  return Promise.all(imagePromises); // 等待所有图片 URL 被获取
}

// 函数，用于在页面上展示图片
function displayImages(items) {
  const imagesContainer = document.getElementById('images-container'); // 你的图片容器

  items.forEach((item) => {
    if (item.imageUrl) {
      const imgElement = document.createElement('img');
      imgElement.src = item.imageUrl;
      imgElement.alt = `Image for item ${item.id}`;
      // 可以根据需要添加更多的样式或属性

      // 将图片元素添加到容器
      imagesContainer.appendChild(imgElement);
    }
  });
}

// 首先更新列表项中的图片 URL
updateItemsWithImageUrls(items).then((updatedItems) => {
  // 然后展示图片
  displayImages(updatedItems);
}).catch((error) => {
  console.error('Error updating image URLs:', error);
});

请注意，updateItemsWithImageUrls 函数返回一个 Promise，该 Promise 在所有图片 URL 都被获取后才解决。我们使用 Promise.all 来等待所有的异步获取 URL 操作完成。

一旦 Promise.all 解决，我们就获得了一个更新后的列表，其中每个对象都包含了一个 imageUrl 字段。然后我们调用 displayImages 函数来遍历这个列表，并在页面上展示图片。

确保你的 HTML 中有一个元素作为容器：

html 复制代码 
<div id="images-container"></div>

此外，请确保你的后端 API 能够根据提供的 imgId 返回正确的图片 URL，并且你的前端环境支持 async/await、fetch API 和 Promise.all。

如果其中一个对象中没有图片id

如果列表中的某些对象可能没有图片 ID，你应该在获取图片 URL 之前检查每个对象是否包含有效的图片 ID。如果一个对象没有图片 ID，你可以决定跳过获取 URL 的过程，或者为这些对象提供一个默认的图片 URL 或占位符。

以下是更新后的示例代码，展示如何处理这种情况：

javascript 复制代码 
// 假设这是你的初始列表数据，每个对象都包含一个图片 ID
const items = [
  { id: '1', imgId: 'image1Id', imageUrl: '' },
  { id: '2', imgId: null, imageUrl: '' }, // 没有图片 ID 的对象
  { id: '3', imgId: 'image3Id', imageUrl: '' },
  // ...其他对象
];

// 假设这是获取图片 URL 的异步函数
async function fetchImageUrl(imgId) {
  try {
    const response = await fetch(`/api/images/${imgId}`);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    return data.imageUrl; // 假设接口返回的 JSON 中包含 imageUrl 字段
  } catch (error) {
    console.error('Fetching image URL failed:', error);
    return null; // 或者可以返回一个默认图片的 URL
  }
}

// 函数，用于更新列表项中的图片 URL 并返回一个包含所有更新项的 Promise
async function updateItemsWithImageUrls(items) {
  const imagePromises = items.map(async (item) => {
    if (item.imgId) {
      const imageUrl = await fetchImageUrl(item.imgId);
      item.imageUrl = imageUrl || 'default-image-url.jpg'; // 如果获取失败，使用默认图片 URL
    } else {
      item.imageUrl = 'placeholder-image-url.jpg'; // 为没有图片 ID 的对象设置占位符 URL
    }
    return item;
  });

  return Promise.all(imagePromises); // 等待所有图片 URL 被获取
}

// 函数，用于在页面上展示图片
function displayImages(items) {
  const imagesContainer = document.getElementById('images-container'); // 你的图片容器

  items.forEach((item) => {
    const imgElement = document.createElement('img');
    imgElement.src = item.imageUrl;
    imgElement.alt = `Image for item ${item.id}`;
    // 可以根据需要添加更多的样式或属性

    // 将图片元素添加到容器
    imagesContainer.appendChild(imgElement);
  });
}

// 首先更新列表项中的图片 URL
updateItemsWithImageUrls(items).then((updatedItems) => {
  // 然后展示图片
  displayImages(updatedItems);
}).catch((error) => {
  console.error('Error updating image URLs:', error);
});

在这个示例中：

  • 我们检查每个对象是否有 imgId。如果有，我们调用 fetchImageUrl 来获取图片 URL。
  • 如果对象没有 imgId 或者 fetchImageUrl 返回 null，我们为该对象设置一个默认的占位符图片 URL。
  • 使用 Promise.all 等待所有图片 URL 获取完成（包括成功和失败的情况）。
  • 最后，我们调用 displayImages 函数来遍历更新后的列表，并在页面上展示图片。

确保你的 HTML 中有一个元素作为容器：

html 复制代码 
<div id="images-container"></div>

此外，请确保你的后端 API 能够根据提供的 imgId 返回正确的图片 URL，并且你的前端环境支持 async/await、fetch API 和 Promise.all。

android版本

在android中怎么处理后端返回列表中包含图片id，如何将列表中的图片id转化成url

相关推荐
真的很上进4 小时前
如何借助 Babel+TS+ESLint 构建现代 JS 工程环境？
java·前端·javascript·css·react.js·vue·html
噢，我明白了7 小时前
同源策略：为什么XMLHttpRequest不能跨域请求资源？
javascript·跨域
sanguine__7 小时前
APIs-day2
javascript·css·css3
关你西红柿子8 小时前
小程序app封装公用顶部筛选区uv-drop-down
前端·javascript·vue.js·小程序·uv
济南小草根8 小时前
把一个Vue项目的页面打包后再另一个项目中使用
前端·javascript·vue.js
小木_.8 小时前
【python 逆向分析某有道翻译】分析有道翻译公开的密文内容，webpack类型，全程扣代码，最后实现接口调用翻译，仅供学习参考
javascript·python·学习·webpack·分享·逆向分析
Aphasia3118 小时前
一次搞懂 JS 对象转换，从此告别类型错误！
javascript·面试
m0_748256569 小时前
Vue - axios的使用
前端·javascript·vue.js
m0_748256349 小时前
QWebChannel实现与JS的交互
java·javascript·交互
胡西风_foxww9 小时前
【es6复习笔记】函数参数的默认值（6）
javascript·笔记·es6·参数·函数·默认值
热门推荐
0119个Web前端交互式3D JavaScript框架和库02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04RAG 实践- Ollama+RagFlow 部署本地知识库05【一文读懂】NTN（非地面网络）技术介绍06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07ZZ038 物联网应用与服务赛题第J套08组基轨迹建模 GBTM的介绍与实现（Stata 或 R）09Docker 夺命连环 15 问10VSCode插件 —— Cody AI （免费AI助手！）