检查 PNG 和 JPG 图像文件之间是否存在并使用 JavaScript 选择可用的一个

Question

我有一个文件夹，其中包含 50 个州中每个州的一张图像。 有些是PNG，有些是JPG文件。 每个文件的名称只是 state 名称，扩展名是 PNG 或 JPG。 “阿拉巴马州.jpg”“康涅狄格州.png”等...

一个名为 stripState 的变量也只是每个 state 的名称，它与图像文件名完全相关。

我可以使用以下 JPG 代码调用并生成适当的图像：

stateImageDisplay.src = `state-pics-converted/${stripState.state}.jpg`;

以及PNG文件的以下内容：

stateImageDisplay.src = `state-pics-converted/${stripState.state}.png`;

这仅在使用其中一个或另一个时有效。 所有 JPG 将正确显示或所有 PNG。

我知道我可以将文件夹中的所有文件转换为 JPG 或 PNG，但我想知道如何使用 JavaScript 在可用文件之间进行选择。

我想编写一个代码来调用与“stripState”匹配的任何图像文件......无论是JPG还是PNG。 如果“stripState”是“Kentucky”，则 javaScript 使“stateImageDisplay.src”等于“Kentucky.jpg”或“Kentucky.png”……以存在者为准。

我想也许我可以使用“if 语句”来检查是否找到了两种文件类型之一。 如果是，就用那个，如果不是，就用另一种。 如下所示：

if (`state-pics-converted/${stripState.state}.jpg` === undefined) {
    stateImageDisplay.src = `state-pics-converted/${stripState.state}.png`;
} else {
    stateImageDisplay.src = `state-pics-converted/${stripState.state}.jpg`;
}

我也尝试将“undefined”换成“onerror”，但没有成功。

当“寻找的”文件扩展名不可用时，控制台日志错误显示消息“net::ERR_FILE_NOT_FOUND”。 我不知道在 if 语句中使用它的等价物是什么......

有什么建议么？ 提前致谢

Answer 1

如果您在浏览器中工作（而不是使用 NodeJS），您可以尝试加载一个图像并使用像这样的加载错误的后备

img.onerror = () => {
    img.src = 'picture.jpg'
}
img.src = 'picture.png'

然后，您需要决定首先尝试加载哪个。

Answer 2

我认为你的方法是正确的，但你的逻辑是错误的。 我想通过为您提供各种自己的解决方案来解决您的问题。

首先我想澄清一下，这个解决方案只有在我们谈论服务器端 javascript 时才可行。 您不能编写将访问其他用户 PC 的文件系统的代码，因此客户端 javascript 不会像 function 那样。

你写了：

if (`state-pics-converted/${stripState.state}.jpg` === undefined) {
stateImageDisplay.src = `state-pics-converted/${stripState.state}.png`;
} else {
stateImageDisplay.src = `state-pics-converted/${stripState.state}.jpg`;
}

实际上，您使用的是字符串值而不是实际的文件系统路径，也就是说，在您的条件语句（if 块）中。 JavaScript 正在读取您的代码并开始“好的，他要我检查这个字符串（默认情况下定义/真实，因为它不是空的）是否等于未定义”。

将始终定义非空字符串。 这就是为什么检查state-pics-converted/${stripState.state}.jpg === undefined是否不起作用的原因。 同样，您实际上是在检查字符串是否未定义。

您必须做的是访问实际的文件系统，找到与 state 名称匹配的任何文件，然后确定该文件是 png 还是 jpg。 完成后，您可以将 stateImageDisplay.src 设置为正确的路径。

本质上，您需要探索目录 -> 找到与您想要的名称匹配的 state -> 检查其类型 -> 将其 src 值设置为。 stateImageDisplay 的 src 属性。

请在此处阅读有关使用 NodeJs 中存在的文件系统模块的信息。

https://www.w3schools.com/nodejs/nodejs_filesystem.asp

然后看到这个问题Get list of filenames in folder with Javascript并向下滚动，看看人们是如何阅读目录的。

同样，目标是专注于检查与您的 state 名称匹配的任何文件的目录，无论其扩展名如何。 一旦你有一个引用实际文件的变量，你就可以检查它的扩展名。 一旦你这样做了，你可以在你的条件中遵循逻辑流程，但使用文件变量本身而不是字符串。