Angular / Electron не может загрузить локальное изображение в Windows

Question

Так что в настоящее время я работаю над небольшим настольным приложением для быстрой сортировки изображений для углубленного изучения данных.

У меня есть функция, которая возвращает текущий путь к изображению (журнал консоли просто добавлен в целях отладки):

getPath() {
  const imagePath = path.join(
    this.dir,
    this.getCategory(),
    this.files[this.getCategory()][this.imageCounter]
  );
  console.log(imagePath);
  return imagePath;
}

эта функция вызывается html-шаблоном для установки изображения в качестве фона:

<div class="image" (mouseover)="hover=true" (mouseout)="hover=false" [ngStyle]="{
      'display': 'inline-block',
      'background': 'url(file://' + getPath() + ') 50% 50% / cover no-repeat ',
      'background-size': hover ? 'contain' : 'cover',
      'height': '600px',
      'width': hover ? '100%' : '600px'
}">
</div>

Как вы видите, я устанавливаю текущий путь к изображению в качестве свойства фонаdiv.

У меня нет проблем в OSX с этим кодом, и изображение отлично отображается, но в Windows при попытке отобразить изображение я получаю следующую ошибку:

GET file:///C:/Users%C3%9AnielocumentsprojectP%C3%9Ata%E0%AA%BC%C7%BAsiokdhnlka.jpg net::ERR_FILE_NOT_FOUND

при просмотрев свойствах div, использующих веб-инструменты chrome, это выглядит следующим образом:

style="display: inline-block; background: url("file://C:UsersÚniel\d ocumentsprojectPÚta઼Ǻsiokdhnlka.jpg") 50% 50% / cover no-repeat; height: 600px; width: 600px;"

Однако проблема не в генерации пути, так как консольный журнал из функции выдает:

C:\Users\Daniel\Documents\projectP\data\abc\1fasiokdhnlka.jpg

Я попытался связать переменную вместо функции, но, к сожалению, не повезло.У кого-нибудь есть идеи, что может быть не так?