Блог

Главная - Вопросы по программированию - Изображения не загружаются в мобильное приложение, созданное с помощью cordova

Изображения не загружаются в мобильное приложение, созданное с помощью cordova

#android #angular #cordova

#Android #angular #cordova

Вопрос:

У меня есть приложение 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> тег с «/» на «./». in 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’ — это текущий URL-адрес, определенный в app.routing.ts. Это означает, что фактический URL-адрес на данный момент:

 http://localhost:1234/scada

Странно то, что все остальное работает. Даже скрипты загружаются идеально.

Может кто-нибудь сказать, что происходит?

Заранее спасибо!

Комментарии:

1. попробуйте определить src в ваших изображениях, как [src]="/assets/spot.png" — см. / Начальный

2. Спасибо Eliseo. Это работало при запуске в браузере с. cordova serve PORT Однако это не работает, когда я запускаю на устройстве с. cordova run android --device Изображения не загружаются. Есть идеи?

Ответ №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, запущенных на устройстве.

Метки: ,