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

使用chrome网络工具查看div属性时，它看起来像这样：

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

我尝试绑定变量而不是函数，但不幸的是，那里没有运气。有人知道什么地方可能出问题吗？

Angular / Electron无法在Windows上加载本地图像

0 个答案: