I am trying to create a something in my project, that display the images that ends with .png

Currently, I have this part of code :

  <h2>Files list :</h2>
  <p id="list"></p>
  <script>
    import 'path';

    const EXTENSION = '.png';

    const targetFiles = files.filter(file => {
      return path.extname(file).toLowerCase() === EXTENSION;
    });

   if(targetFiles == "") {
    document.getElementById("list").innerHTML = "No images found.";
   } else {
    document.getElementById("list").innerHTML = targetFiles;
   }
</script>

The issue here is that I can't find an alternative solution for the path package that is working for web and can help me with this.

CodePudding user response：

You cannot access any file system through a web application, client or server, no matter how "localy on a pc" it will be.

To do the kind of thing you're describing, you need a second application to handle the file system lookup and/or transfer (presumably, you also want to see the images, right?). And then the two applications can talk over AJAX calls or web-sockets to request the look ups and download the needed files.

CodePudding user response：

1. step 1 for HTML

   img src= for pic

2. step 2

   use the internet to look for picture or go to gallery to find a picture go to your file

3. step3

   use the img src for the picture example img src =a