图像未加载到使用 cordova 构建的移动应用程序中答案

【问题标题】：Images are not loaded in mobile application built with cordova图像未加载到使用 cordova 构建的移动应用程序中
【发布时间】：2020-11-26 04:13:30
【问题描述】：

我有一个运行良好的 Angular 应用程序，我使用 apache cordova 构建了一个移动应用程序。移动应用程序运行良好，只是由于找不到路径而未加载图像。

这是我的文件结构：

    angular.json
    package.json
    config.xml
    src
        assets
        index.html
    www
        assets
        index.html

这里是angular.json的一部分：

    "outputPath": "www",
    "baseHref": "",
    "deployUrl": "",
    "index": "src/index.html",
    "main": "src/main.ts",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "tsconfig.app.json",
    "aot": true,
    "assets": [
      "src/assets"
    ],
    "styles": [
      "src/assets/css/AdminLTE.css"
    ],
    "scripts": [
      "src/assets/adminlte.min.js"
      "src/assets/bootstrap.min.js"
    ]

我还将<base href> 标签从“/”更改为“./”。在 index.html 中

以下是我使用的命令：

    ng build --aot --prod
    cordova run android --device
    or
    cordova serve 1234

在我的移动设备上运行以及在使用 cordova serve 的浏览器上进行测试时都会出现问题。

这是我的开发控制台的输出：

GET http://localhost:1234/android/www/index.html/scada/assets/spot.png 404 (Not Found)

'scada' 是 app.routing.ts 中定义的当前 URL 路径。这意味着此时的实际 URL 是：

http://localhost:1234/scada

奇怪的是，其他所有东西都在工作。甚至脚本也完美加载。

谁能告诉我发生了什么？

提前致谢！

【问题讨论】：

尝试在图像中定义 src，例如 [src]="/assets/spot.png" - 请参阅 / 初始值
感谢埃利塞奥。这在使用cordova serve PORT 的浏览器上运行时有效。但是，当我在带有cordova run android --device 的设备上运行时，它不起作用。图像未加载。有什么想法吗？

标签： android angular cordova

【解决方案1】：

好的，有兴趣的朋友，经过大量的调试和挖掘，下面是答案：

与大多数人的说法相反，应该在<img 标签中定义的路径不是相对于根路径，而是相对于当前 URL。示例：

我有一个加载在 URL 中的控制器（例如，角度组件）：

http://myserver:PORT/path1/path2/path3

控制器模板（例如myController.component.html）有一个<img 标签，以便从src/assets/pictures/myPicture.png加载图片。

那么，<img 标签应该定义如下： <img src="../../../assets/pictures/myPicture.png

请注意，在路径前添加 / 确实适用于 chrome，但不适用于设备。

顺便说一句，chrome://inspect 是调试在设备上运行的 cordova 应用程序的好工具。

【讨论】：