Ionic 2 Изображения, не отображаемые на устройстве

Ответ 1

У меня была такая же проблема с относительными путями

<img src="../assets/img/vis_reco.png">  

работает с ионным сервисом /, а также с загрузкой в ​​эмуляторе (например, из src/pages/home/home.html) Но не на устройстве.

Не используйте относительные пути для изображений!!!

<img src="assets/img/vis_reco.png">  

работает для меня с Ionic (v3), а также с приложениями angular typescript. На устройстве (ionic cordova run) с помощью ionic serve, а также с помощью ng s (angular apps)

используемое дерево dir:

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

ionic start ionicConf conference

(btw: тот же quetiosn и ответ здесь: https://forum.ionicframework.com/t/images-not-displayed-on-device/89145)

Ответ 2

Вам не нужно использовать ../assets/. Просто укажите путь из assets/img/.

Для изображений в вашем CSS (background-image, border-image, etc.) Вам нужно использовать ../assets/.

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

 assets/
    img/
       img1.jpg
       img2.jpg

 build/
    main.css
    polyfills.js
    main.js

 index.html

HTML будет динамически добавлен в index.html. Таким образом, src тега img будет находиться в том же месте файла index.html. Итак, assets/img/*.jpg достаточно для src тега img. Если перейти к файлу CSS, папка активов - это папка, в которой она находится. Итак, для использования изображений в CSS, таких как background-image, border-image и т.д. Нам нужно указать путь, например, ../assets/img/*.jpg.

Ответ 3

Добавьте ваши изображения в src/assets/imgs directory

Установить путь к изображению в HTML как

<img src="assets/imgs/example.jpg">

Установить путь к изображению в SCSS как

background-image: url(../assets/imgs/example.jpg);

Будет работать браузер, эмулятор и сборка

Ответ 4

Моя проблема была в верхнем регистре имени файла в папке. Проверка его сейчас

Ответ 5

В Ionic (v3) он должен работать, у меня это работает.

<img src="assets/img/image.jpg">  

дополнительный

Если URL вашего изображения является динамическим, то вы можете использовать привязку свойств, иногда она не работает на реальном устройстве, когда мы используем img src like-

    <img src="{{imageUrl}}">  

затем он работает в браузере, но в реальном устройстве иногда не работает, поэтому мы используем свойство еще одним способом binding-

    <img [src]="imageUrl">  

это работа на реальном устройстве.

Ответ 6

Я столкнулся с одной и той же проблемой, но решил путь от относительного к абсолюту и теперь работает. Я также хотел бы поделиться своим опытом, что я не изменил файл angular, который требует, чтобы img location lolx был забавным, но я сделал это, чтобы также посмотреть вашу HTML-страницу.

Ответ 7

Реальное решение, которое я чувствую, - это сделать все ваши пути, такие как src= "assets/img/image.jpg", и как только вы это сделаете повсюду в своем приложении src, выполните сборку: ionic cordova build... Это позволит убедиться что изображения появляются в следующем прогоне.

Ответ 8

Изображение не отображается для ionic cordova build android Я нашел это решение в Ionic 3.

попробуй это:

<img src="/android_asset/www/assets/imgs/avatar.png" alt="Loading...">

это работает для меня.

Ответ 9

В моем приложении изображения отображаются в браузере и в реальном приложении отлично, помещая изображения не в актив, а в www/img и получая их в html файлах с помощью:

<img src="img/filename.png" />

Ответ 10

Добавьте свое изображение в папку src/app/assets/folder

как показано ниже

    <img src="assets/img/bjork-live.jpg"/>

Ответ 11

Если вы ссылаетесь на изображение из шаблона html, вы используете <img src="assets/img/mypic.png"> он работал у меня ионным v3

Ответ 12

Я также столкнулся с этой проблемой и решил ее, сославшись на все источники изображений в файлах шаблонов, как если бы они отображались из файла index.html в каталоге "src".

<img src="assets/path_to_img_file_in_assets_folder">

Причина, по которой это работает при использовании "ионной подачи", но не после сборки устройства, заключается в том, что "ионная подача" использует локальный http-сервер, поэтому файлы в конечном итоге запрашиваются как " http://localhost: port_number/assets/path_to_file " (что правильно). Однако после того, как apk собран для устройства, локальный сервер не используется, и файлы становятся недоступными, поскольку шаблон отображается из файла index.html.

Ответ 13

Это случилось со мной, и я решил это следующим образом, убедитесь, что в деталях изображения файл похож на .jpg или .JPG, это может показаться простым, но сделайте тест, и вы увидите, что проблема будет исправлена.,

Ответ 14

Я хотел бы добавить еще одну вещь к ответам выше - это было проблемой для меня уже дважды, и я должен был изучить это трудным способом оба раза.

Таким образом, если вы добавите подпапку, например "Test", в путь к активам и создадите приложение, папка Test будет создана в папке "www".

Если вы позже переименуете папку внутри src/в "test" (обратите внимание на строчную букву t), имя внутри "www" останется как "Test" (обратите внимание на прописную букву t), и изображения будут загружаться в браузере нормально (если вы использовать ионную подачу). Но если вы запустите его на устройстве Android, это не сработает (изображения не будут отображаться). Таким образом, вы должны вручную переименовать папки также в папке www.

Эта "проблема" сохраняется в Windows, не обязательно для Linux/Mac OS, но у меня есть ощущение, что этой проблемы не будет, поскольку заглавная буква T не будет рассматриваться как строчная буква T.

Ответ 15

Вставьте изображения в папку активов.

например: активы /IMG/admin.png.

в вышеприведенном пути работает отлично. Мое изображение доступно в папке Asset внутри папки img. У меня есть изображение, поэтому я получаю описанный выше метод. Не используйте..asset/img. ,

Ответ 16

<img src="./assets/img/image.jpg"/>

Поскольку весь шаблон компонентов будет добавлен в index.html, поэтому путь ресурса изображения будет относиться к index.html, а не по отношению к файлу шаблона