后端返回List<String> list数组,其中是多个图片的base64字符串,前端接收到list后怎么在div中显示图片
时间: 2024-10-01 11:08:07 浏览: 33
springMVC前台传数组类型,后台用list类型接收实例代码
当后端返回一个包含多个Base64图片字符串的列表 (`List<String>`) 时,前端可以在HTML中使用JavaScript来动态生成和显示这些图片。以下是一个简单的示例:
1. 创建HTML结构:
```html
<div id="image-gallery">
</div>
```
这个 `div` 将作为图片容器。
2. 使用JavaScript处理数据:
```javascript
// 假设你在前端接收到了如下的Base64图片列表
const images = ['data:image/jpeg;base64,...', 'data:image/png;base64,...'];
// 获取图片容器元素
const imageGallery = document.getElementById('image-gallery');
images.forEach((imageBase64, index) => {
// 创建一个新的`img`元素,并设置其src属性为解码后的图片地址
const imgElement = document.createElement('img');
imgElement.src = decodeBase64ToImageUrl(imageBase64); // 这里需要你定义一个函数将Base64编码转为URL
// 添加图片描述(可选)
imgElement.alt = '图片 ' + (index + 1);
// 将图片添加到容器中
imageGallery.appendChild(imgElement);
});
```
这里的 `decodeBase64ToImageUrl` 是一个函数,用于将Base64编码转换为图片URL。实际应用中,你可以自己实现这个函数,或者借助现有的库工具。
阅读全文