要显示关系列表中当前已登录用户的图片,可以通过以下步骤实现:
<img>
标签来显示图片,并设置一个唯一的ID作为标识。以下是一个示例代码:
前端代码(HTML和JavaScript):
<!DOCTYPE html>
<html>
<head>
<title>显示用户图片</title>
<style>
#userImage {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="userImage"></div>
<script>
// 发送请求获取用户图片URL
fetch('/getUserImage')
.then(response => response.json())
.then(data => {
// 更新图片容器的内容
document.getElementById('userImage').innerHTML = `<img src="${data.imageUrl}" alt="User Image">`;
})
.catch(error => console.error(error));
</script>
</body>
</html>
后端代码(示例使用Node.js和Express框架):
const express = require('express');
const app = express();
// 模拟数据库中的用户信息
const users = [
{
id: 1,
username: 'user1',
imageUrl: 'https://example.com/user1.jpg'
},
{
id: 2,
username: 'user2',
imageUrl: 'https://example.com/user2.jpg'
}
];
// 处理获取用户图片URL的请求
app.get('/getUserImage', (req, res) => {
// 假设已经获取到当前已登录用户的信息
const loggedInUser = {
id: 1,
username: 'user1'
};
// 查询数据库获取用户图片URL
const user = users.find(u => u.id === loggedInUser.id);
if (user) {
res.json({ imageUrl: user.imageUrl });
} else {
res.status(404).json({ error: 'User not found' });
}
});
// 启动服务器
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
在上述示例中,前端通过发送GET请求/getUserImage
来获取当前已登录用户的图片URL。后端根据用户的登录信息查询数据库,找到对应的用户并返回图片URL。前端接收到后端的响应后,使用JavaScript动态更新图片容器的内容,将用户的图片显示出来。
请注意,示例中的数据库是简单的模拟数据,实际应用中需要根据具体情况使用真实的数据库来存储用户信息和图片URL。另外,示例中的代码仅供参考,实际开发中可能需要根据具体需求进行适当的修改和优化。
领取专属 10元无门槛券
手把手带您无忧上云