Check existence between PNG and JPG image files and choose whichever one is available using JavaScri-CodePudding

I have a folder that contains one image of each of the 50 states. Some are PNG and the others are JPG files. The name of each file is simply the state name and the extension is either PNG or JPG. "Alabama.jpg" "Connecticut.png" etc...

A variable called stripState is also simply the name of each state which correlates exactly to the image file names.

I can call and produce the appropriate image using the following code for the JPGs:

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

and the following for the PNG files:

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

This works only when using either one or the other. All the JPGs will display appropriately or all the PNGs.

I know that I could convert all of the files within the folder to either JPG or PNG but I would like to know how to use JavaScript to choose between whichever file is available.

I want to write a code that calls whichever image file matches the "stripState"...be it a JPG or PNG. If the "stripState" is "Kentucky", the javaScript makes the "stateImageDisplay.src" equal either "Kentucky.jpg" or "Kentucky.png"...whichever one exists.

I thought maybe I could use an "if statement" to check if one of the two filetypes is found. If so, use that one, if not, use the other type. Like below:

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

I have also tried swapping "undefined" for "onerror" but had no success.

The console log error shows the message "net::ERR_FILE_NOT_FOUND" when the "sought for" file extension is unavailable. I don't know what the equivalent to that would be in order to use it in the if statement...

Any suggestions? Thanks in advance

CodePudding user response：

If you are working inside the browser (and not with NodeJS), you could try to load one image and use a fallback on a loading error like so

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

You would then need to decide which one to try loading first.

CodePudding user response：

I think that your approach is correct, but your logic is wrong. I would like to address your question by giving you a rendition of sorts of your own solution.

First I want to clarify that this solution is viable only if we are talking about server side javascript. You cannot write code that will access the file system of another user's pc, so client-side javascript ain't gonna function like that.

You wrote:

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

You are in fact working with string values and not actual filesystem paths, that is, in your conditional statement (if block). JavaScript is reading your code and going "Okay, he wants me to check if this string (a which is by default defined/truthy since it is not empty) is equal to undefined".

A non-empty string will always be defined. That is why checking if state-pics-converted/${stripState.state}.jpg === undefined does not work. Again, you are literally checking if a string is undefined.

What you must do is access the actual filesystem, find any file that matches the state name, and then determine if that file is a png or jpg. Once that is done, you can set the stateImageDisplay.src to the proper path.

Essentially, you need to explore the directory -> Find the state that matches the name you want -> check its type -> set its src value as. the stateImageDisplay's src property.

Please read here for information about using the filesystem module as it exists in NodeJs.

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

And then see this question Get list of filenames in folder with Javascript and scroll down and see how people are reading the directory.

Again, the goal is to focus on checking the directory for any file, regardless of its extension, that matches your state name. Once you have a variable referencing the actual file, you can check its extension. Once you do that, you can follow the flow of logic in your conditional, but working with the file variable itself instead of strings.