所以,我有一个项目,它基本上需要一封电子邮件,然后将@后面的部分去掉,并将其放入一个文件夹中,拥有电子邮件的人可以从浏览器中看到。但图像不会显示为图像,仅显示为图像图标及其旁边的文件名。我尝试过重命名文件、重新上传文件、将
img.alt = filename;
改为 img.alt = photo;
等等,但我找不到任何成功。此外,它不会抛出任何错误消息。
删除@后面的部分是通过以下代码完成的:
username = req.user.email.split('@')[0]
服务器端有这样的代码:
app.get('/uploaded-photos', (req, res) => {
console.log(req.user);
const username = req.user.email.split('@')[0];
fs.readdir(path.join(__dirname, 'uploads', username), (err, files) => {
if (err) {
console.error(`Error reading uploads directory for user ${username}:`, err);
res.status(500).send('Error reading uploads directory');
} else {
res.json(files);
}
});
});
客户端有这样的代码:
fetch('/uploaded-photos')
.then(response => response.json())
.then(photos => {
const photosContainer = document.getElementById('uploaded-photos');
photos.forEach(photo => {
const img = document.createElement('img');
const filenameParts = photo.split('/');
const filename = filenameParts[filenameParts.length - 1]; //File name
img.src = '/uploads/' + filename; // Path
img.alt = filename;
img.classList.add('preview-image');
photosContainer.appendChild(img);
});
const previewImages = document.querySelectorAll('.preview-image');
previewImages.forEach(img => {
img.addEventListener('click', () => {
alert('A modal could be opened to show in large size');
});
});
})
.catch(error => console.error('Error fetching photos:', error));
upload.html 的 HTML 脚本如下所示:
<script>
fetch('/uploaded-photos')
.then(response => response.json())
.then(photos => {
const photosContainer = document.getElementById('uploaded-photos');
photos.forEach(photo => {
const img = document.createElement('img');
const filenameParts = photo.split('/');
const filename = filenameParts[filenameParts.length - 1]; // Get file name
img.src = './uploads/' + filename; // File path
img.alt = filename;
img.classList.add('preview-image');
photosContainer.appendChild(img);
});
const previewImages = document.querySelectorAll('.preview-image');
previewImages.forEach(img => {
img.addEventListener('click', () => {
alert('Open image in a new tab to view it at the original size.');
});
});
})
.catch(error => console.error('Error fetching photos:', error));
</script>