Finding or generating correct filename extensions - html

Question

Say I have a JSON Array called 'blogPost' like below:
[
{
"date" : "2020.11.25",
"title" : "Getting help on Stack overflow"
},
{
"date" : "2020.11.18",
"title" : "Putting my site together"
},
...
]
and a folder of images with the post date like below:
2020.11.25.jpg, 2020.11.18.png, 2020.11.03.gif, etc ...
I was hoping to bring in, edit, and .append() a template html snippet using my JSON array - the "date" would populate both some text and a file path in the html snippet:
<div>
<img src="blog/images/{date}.{extension}" alt="{date}">
<h5>{date} - {title}</h5>
</div>
Jquery:
$.getJSON( "blog/posts.json", function(data) {
$.each(data, function(index,item) {
let extension = 'jpg' || 'png' || 'gif';
$("<div>").load("blog/blog-snippet.html", function() {
$(this).html($(this).html().replaceAll("{date}", item.date));
$(this).html($(this).html().replaceAll("{title}", item.title));
$(this).html($(this).html().replaceAll("{extension}", extension));
$("#content").append($(this).html());
});
});
});
The idea was to use "date" from the array multiple times just to slim and automate the process.
I can change the name of each text and image file using the looped array. However is there a way to generate the correct file extension (jpg, png, etc...) for each image file using html or js/jquery? My current extension variable doesn't find the "correct" extension - it just uses jpeg. This results in only some of the correct file paths.
I suppose my other option would be to add an "image" option to the JSON Array and include the correct file extension.
Any advice is welcome!