Html Question posted in
Some basic documentation can be found here.

Html – Image name showing up but the image itself is showing up as image icon

So, I have this project which basically takes an email and buts out the part after @ and makes that into a folder that the person with the email can see from the browser. But the images don’t show up as images, only as image icons and the files name next to them. I’ve tried to rename the files, reupload the files, making img.alt = filename; to img.alt = photo; and etc, but I couldn’t find any success. Also, it doesn’t throw any error messages.

The deleting the part after @ was done with this code:
username = req.user.email.split('@')[0]

The server side has this code:

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);
        }
    });
});

While the client side has this code:

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));

And the HTML script for upload.html looks like this:

<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>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I just made the html get the photo directory from a json file instead of trying to find it inside the directories. This helped the html to view the photos


  2. 0

    If you seeing the right the image name(the string before @) , then may its the path which is not correct .
    Try to just to an inspect and that will take to the client code code and will help you find the issues .
    I am sharing the snapshot , hopefully that helps .

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search