Динамическая загрузка данных в javascript

---

У меня есть некоторый код, который я покажу ниже, и я хочу динамически загружать некоторые изображения с помощью javascript. Загружаемые изображения поступают из моего скрипта python и будут обрабатывать некоторые данные каждые 3 часа после завершения процесса из python. Затем выходное изображение отображается на веб - сайте. Поэтому ввод изображений должен быть динамическим.


Приведенный ниже код-это просто царапина, потому что у меня нет никаких предварительных знаний о том, как использовать javascript. и

let listofImages

отчасти это то, как я "вручную" загружаю изображения. любая помощь будет очень признательна.

Что я уже пробовал:

<script>
function playImages(parameter) {
var path = "";
if(parameter == "precip") {
path = "path to the precip folder" 
else if(parameter == "temp") {
path = "path to the temp folder"
} else {
path = "path to the wind folder"
}
let listOfImages = [ 
"pyqgis-ops/PrecipRate/prate_rpnprate-postwrf_d01_20180923_0600_f00000.png",
"pyqgis-ops/PrecipRate/prate_rpnprate-postwrf_d01_20180923_0600_f00100.png",
"pyqgis-ops/PrecipRate/prate_rpnprate-postwrf_d01_20180923_0600_f00200.png",
"pyqgis-ops/PrecipRate/prate_rpnprate-postwrf_d01_20180923_0600_f00300.png",
"pyqgis-ops/PrecipRate/prate_rpnprate-postwrf_d01_20180923_0600_f00400.png",
"pyqgis-ops/PrecipRate/prate_rpnprate-postwrf_d01_20180923_0600_f00500.png",
"pyqgis-ops/PrecipRate/prate_rpnprate-postwrf_d01_20180923_0600_f00600.png"
];

let currentKey = 0;
let sizeOfImages = listOfImages.length;

setInterval(function(){
let strSplit = listOfImages[currentKey].split('-');
let removeOtherText = strSplit[1].replace("postwrf_d01_","").replace(".png","");
let dateSplit = removeOtherText.split('_');

$("#img-container").attr('src', listOfImages[currentKey]);
$("#img-container").attr('data-key', currentKey);
$("#date").text(dateSplit[0] + ' ' + dateSplit[1] + ' '  + dateSplit[2]);
currentKey = currentKey + 1;

if(currentKey == sizeOfImages) {
currentKey = 0;
}
},1500);
}

playImages("precip");
let strSplit = "prate_rpnprate- postwrf_d01_20180923_0600_f00000.png".split('-');
let removeOtherText = strSplit[1].replace("postwrf_d01_","").replace(".png","");
let dateSplit = removeOtherText.split('_');
console.log(dateSplit[0]);
console.log(dateSplit[1]);
console.log(dateSplit[2]);

</script>

В моем html это та часть которая обрабатывает этот js код:

<span id="date"></span>
<img src="" id="img-container" width="650" height="700" data-key="0" />

То обрабатывает выходные данные строки в зависимости от имени файла изображения

---