javascript - 如何在Electron中从文件名转换为URL？

Question

假设我得到.jpg文件的目录列表，然后想要显示它们

const fs = require('fs');
fs.readDirSync(someAbsolutePathToFolder)
    .filter(f => f.endsWith('.jpg'))
    .forEach(filename => {
        const img = new Image();
        const filepath  = path.join(someAbsolutePathToFolder, filename);
        img.src = `file://${filepath.replace(/\\/g, '/')}`;
        document.body.appendChild(img);
    });

这将失败。仅举一个例子，如果我得到的列表名称像

#001-image.jpg
#002-image.jpg

上面的代码会生成如下网址

file://some/path/#001-image.jpg

您看到的是一个问题。该URL将在 #处剪切。

This answer声称我应该使用 encodeURI，但这也失败了，因为它使 #处于未转义状态。

使用 encodeURIComponent也不起作用。它替换了 /和 :和空格，Electron找不到文件，至少在Windows上找不到。

到目前为止，我有这样的事情

const filepath  = path.join(someAbsolutePathToFolder, filename).replace(/\\/g, '/');
img.src = `file://${filepath.split('/').map(encodeURIComponent).join('/')}`;

但这在Windows上也失败了，因为驱动器号从 c:\dir\file转换为 c%3a\dir\file，然后看来是 Electron 的相对路径。

因此，我有更多特殊情况试图在路径的开头检查 [a-z]:以及UNC路径的 \\。

今天我遇到了上面提到的 #问题，我希望有更多定时炸弹在等我，所以我在问...

以跨平台方式将文件名转换为URL的正确方法是什么？

或者更具体地说，如何解决上述问题。给定一个目录，该目录列出了本地平台上图像文件的绝对路径，生成的URL将在分配给图像的 src属性时加载这些图像。

Answer 1

这对我来说很好:

const open = require('open')
const path = require('path')

const FILE_NAME = 'картинка.jpg'
const filePath  = path.join(__dirname, FILE_NAME)
const fileUrl = `file:///${ filePath.split('\\').join('/') }`

console.log(fileUrl)
open(fileUrl)