如何在Angular UI中从API返回的嵌套对象数组中获取picByte并渲染图片

你从API获取到的产品数据结构如下（包含嵌套的productImages数组，其中picByte是图片的Base64编码）：

[{"productName":"saree","productDescription":"bomkai saree","productDiscountPrice":12000,"imageUrl":"drdrfd","productActualPrice":12400,"productImages":[{"id":10,"name":"Screenshot from 2022-09-05 18-27-38.png","type":"image/png","picByte":"3B0JoYZ1QGDSDBwyYAP0p4AgqrkuCDxrnc4dx3KCk4kHrj3rRbY3EgluN4exFo2KYC4pdyHuuog3KfVIPlDWvoS1uGO8T1nVByTumaZbzz/PYNA7DacA8zbANn4tGqDy2IQ563ZKYGxgkdA1DdNNjFlwzn6k+OO4Hjj27mAqXhcbyvg+SVoaYpDOGcyemBNINSGCd4UOLuvN5fjzXW08cNM95EULIhse4yDHWaFt+Rts6HHWXWgPrusOJ+YfGTI3/A4U7lzwWAyjoAAAAAElFTkSuQmCC"}],"id":22}]

要实现展示图片，核心是把picByte转换成浏览器能识别的图片地址，下面给你几种实用的实现方式：

方法一：使用for循环遍历（最基础的写法） #

这种写法逻辑清晰直观，适合刚接触前端的开发者：

// 假设这是你从API获取到的响应数据
const productData = [{"productName":"saree","productDescription":"bomkai saree","productDiscountPrice":12000,"imageUrl":"drdrfd","productActualPrice":12400,"productImages":[{"id":10,"name":"Screenshot from 2022-09-05 18-27-38.png","type":"image/png","picByte":"3B0JoYZ1QGDSDBwyYAP0p4AgqrkuCDxrnc4dx3KCk4kHrj3rRbY3EgluN4exFo2KYC4pdyHuuog3KfVIPlDWvoS1uGO8T1nVByTumaZbzz/PYNA7DacA8zbANn4tGqDy2IQ563ZKYGxgkdA1DdNNjFlwzn6k+OO4Hjj27mAqXhcbyvg+SVoaYpDOGcyemBNINSGCd4UOLuvN5fjzXW08cNM95EULIhse4yDHWaFt+Rts6HHWXWgPrusOJ+YfGTI3/A4U7lzwWAyjoAAAAAElFTkSuQmCC"}],"id":22}];

// 获取页面上用于存放图片的容器（需提前在HTML中定义，比如<div id="image-container"></div>）
const imageContainer = document.getElementById('image-container');

// 外层循环遍历每个产品
for (let i = 0; i < productData.length; i++) {
  const currentProduct = productData[i];
  // 内层循环遍历当前产品的所有图片
  for (let j = 0; j < currentProduct.productImages.length; j++) {
    const currentImage = currentProduct.productImages[j];
    // 创建img元素
    const imgElement = document.createElement('img');
    // 拼接Base64图片的完整地址：data:[MIME类型];base64,[编码数据]
    imgElement.src = `data:${currentImage.type};base64,${currentImage.picByte}`;
    // 设置图片的alt属性（提升可访问性）
    imgElement.alt = `${currentProduct.productName} - ${currentImage.name}`;
    // 可选：添加基础样式
    imgElement.style.width = '200px';
    imgElement.style.margin = '10px';
    // 将图片添加到容器中
    imageContainer.appendChild(imgElement);
  }
}

方法二：使用数组forEach方法（更简洁的写法） #

forEach是数组的内置方法，代码更简洁，可读性也不错：

const productData = [{"productName":"saree","productDescription":"bomkai saree","productDiscountPrice":12000,"imageUrl":"drdrfd","productActualPrice":12400,"productImages":[{"id":10,"name":"Screenshot from 2022-09-05 18-27-38.png","type":"image/png","picByte":"3B0JoYZ1QGDSDBwyYAP0p4AgqrkuCDxrnc4dx3KCk4kHrj3rRbY3EgluN4exFo2KYC4pdyHuuog3KfVIPlDWvoS1uGO8T1nVByTumaZbzz/PYNA7DacA8zbANn4tGqDy2IQ563ZKYGxgkdA1DdNNjFlwzn6k+OO4Hjj27mAqXhcbyvg+SVoaYpDOGcyemBNINSGCd4UOLuvN5fjzXW08cNM95EULIhse4yDHWaFt+Rts6HHWXWgPrusOJ+YfGTI3/A4U7lzwWAyjoAAAAAElFTkSuQmCC"}],"id":22}];

const imageContainer = document.getElementById('image-container');

// 遍历每个产品
productData.forEach(product => {
  // 遍历当前产品的所有图片
  product.productImages.forEach(image => {
    const imgElement = document.createElement('img');
    imgElement.src = `data:${image.type};base64,${image.picByte}`;
    imgElement.alt = `${product.productName} - ${image.name}`;
    imgElement.style.width = '200px';
    imgElement.style.margin = '10px';
    imageContainer.appendChild(imgElement);
  });
});

方法三：使用模板字符串批量生成HTML（适合静态渲染场景） #

如果你的场景不需要频繁操作DOM，这种方式可以一次性生成所有图片的HTML，效率更高：

const productData = [{"productName":"saree","productDescription":"bomkai saree","productDiscountPrice":12000,"imageUrl":"drdrfd","productActualPrice":12400,"productImages":[{"id":10,"name":"Screenshot from 2022-09-05 18-27-38.png","type":"image/png","picByte":"3B0JoYZ1QGDSDBwyYAP0p4AgqrkuCDxrnc4dx3KCk4kHrj3rRbY3EgluN4exFo2KYC4pdyHuuog3KfVIPlDWvoS1uGO8T1nVByTumaZbzz/PYNA7DacA8zbANn4tGqDy2IQ563ZKYGxgkdA1DdNNjFlwzn6k+OO4Hjj27mAqXhcbyvg+SVoaYpDOGcyemBNINSGCd4UOLuvN5fjzXW08cNM95EULIhse4yDHWaFt+Rts6HHWXWgPrusOJ+YfGTI3/A4U7lzwWAyjoAAAAAElFTkSuQmCC"}],"id":22}];

const imageContainer = document.getElementById('image-container');

// 生成所有图片的HTML字符串
const imagesHtml = productData.map(product => {
  return product.productImages.map(image => `
    <img 
      src="data:${image.type};base64,${image.picByte}" 
      alt="${product.productName} - ${image.name}"
      style="width:200px; margin:10px;"
    >
  `).join(''); // 拼接当前产品的图片HTML为字符串
}).join(''); // 拼接所有产品的图片HTML为最终字符串

// 将生成的HTML插入到容器中
imageContainer.innerHTML = imagesHtml;

关键注意事项 #

• 必须拼接data URI前缀：浏览器需要通过data:${image.type};base64,这个前缀识别出这是Base64编码的图片数据，以及图片的MIME类型（比如image/png）
• 异步数据处理：如果你的产品数据是通过异步请求获取的（比如用fetch或axios），一定要确保在数据返回后再执行渲染代码，比如放在.then()回调里或者async/await的await之后
• 可访问性优化：记得给img标签设置alt属性，这对屏幕阅读器用户很友好

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