显示图像名称，但图像本身显示为图像图标

Question

所以，我有一个项目，它基本上需要一封电子邮件，然后将@后面的部分去掉，并将其放入一个文件夹中，拥有电子邮件的人可以从浏览器中看到。但图像不会显示为图像，仅显示为图像图标及其旁边的文件名。我尝试过重命名文件、重新上传文件、将

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>

Answer 1

如果您看到正确的图像名称（@之前的字符串），那么可能是路径不正确。 尝试进行检查，这将检查客户端代码并帮助您找到问题。 我正在分享快照，希望有帮助。

Answer 2

我只是让 html 从 json 文件中获取照片目录，而不是尝试在目录中查找它。这有助于 html 查看照片