如何使用 Node.js 文件系统在浏览器中设置 img 标签的 src？

Question

我正在创建一个要在浏览器中查看的 html 文件，并且在页面上播放图像幻灯片。我希望图片的迭代遍历子文件夹中的所有图片。

最理想的是，我应该能够 add/remove 图片文件夹中的图片，而无需触及代码或对文件名称进行硬编码。我正在尝试使用 node.js 和 require('fs') 来 return 文件夹中的可用文件列表，但我对节点完全陌生，不知道如何从浏览器。目前这是我所拥有的：

website.html

<script src="app.js"></script>

app.js

const fs = require('fs');

const files = fs.readdir('./images', function(err, files) {
    if (err) console.log('Error: ', err);
    else console.log(files);
})

运行这在浏览器中抛出错误 require is not defined.

我在文件夹的命令提示符中有运行 npm install -g browserify。

如何以浏览器可以访问图像文件夹中的文件的方式实现我的节点文件？

Answer 1

要列出文件夹中所有文件的名称，请尝试：

fs.readdir('path-to-your-folder', (error, files) => {
    if (error) {
        console.error(error);
        return;
    }
    files.forEach(file => {
        console.log(file);
    }) 
})

Answer 2

如果您已经知道如何设置后端服务器，这里是使用 Node、Express 和 Pug 的设置

节点：server.js

const express = require('express');
const app = express();
app.set('view engine', 'pug');

app.use(express.static(__dirname + '/public'));

const imagesFolder = './public/images/splash';
const fs = require('fs');

var filesArr = [];

fs.readdir(imagesFolder, (err, files) => {
  files.forEach(file => {
    filesArr.push(file);
  });
});

app.get('/', (req, res) => {
  console.log(filesArr);
  res.render('splash', {
    filesArr : JSON.stringify(filesArr)
  });
});

帕格：splash.pug

doctype html
html
  body(style='overflow:hidden')
    div#theShow(style="height:100%; width:100%; background-repeat:no-repeat; background-position:center;")
    script.
      const files = JSON.parse('!{filesArr}');
    script(src='javascript/splashScreen.js')

JavaScript: splashScreen.js

var slideIndex = 0;
showSlides();

function showSlides(){

    var slideshow = document.getElementById('theShow');             
    slideshow.style.backgroundImage = "url('../images/splash/" + files[slideIndex] + "')";

    document.body.removeChild(slideshow);
    document.body.appendChild(slideshow);

    if (slideIndex < files.length) {
        slideIndex++;
    } else {
        slideIndex = 0;
    }
    setTimeout(showSlides, 6000);
}

对于 Node，readdir() 函数用于读取目录，filesArr 变量被赋予 \ 的 get request 上的 Pug 文件， a.k.a。根.

Pug 然后可以使用 !{} 访问 filesArr 变量。变量 files 在它自己的 script. 中设置为等于 filesArr，然后调用外部脚本并访问 files

它也更适合我用来更改 div 的 backgroundImage 而不是 img 的 src。但是 splashScreen.js 中的 javascript 可以很容易地重写为 slideshow.src = "url('../images/splash/" + files[slideIndex] + "')";，其中幻灯片是 img 元素而不是 div.

如果你像我一样在了解如何为你的网站设置后端服务器之前尝试这样做

互联网上有很多关于使用 Node 的好资源，但有时很难找到。更难找到有关如何为绝对初学者入门的资源。

This YouTube video 内容丰富，没有太多废话，展示了如何从零开始。（超链接时间戳从 9:20 开始，这是实际编程开始的时间，但视频的第一部分也提供了信息）

在该视频之后，同一位 YouTuber 有一个 playlist where he makes a wesbite using Node, Express and Pug，您可以观看该视频以了解如何设置后端服务器，然后您可以使用此答案顶部的代码！

如何使用 Node.js 文件系统在浏览器中设置 img 标签的 src？

How to use Node.js File System to set the src of an img tag in a browser?

javascript

browser

node.js

express

pug

如果您已经知道如何设置后端服务器，这里是使用 Node、Express 和 Pug 的设置

如果你像我一样在了解如何为你的网站设置后端服务器之前尝试这样做