2013-10-26 10 views
6

Niedawno zdecydowałem się rozpocząć korzystanie z aplikacji PhoneGap Build do tworzenia aplikacji przy użyciu technologii internetowych. Zauważ, że używam PhoneGap Build nie PhoneGap, więc nie utrzymuję natywnych API.Obrazy niewyświetlane w aplikacji PhoneGap Build

Używam znaczników HTML img do wyświetlania obrazów oczywiście i mam problemy. Obrazy wyświetlają się ładnie w przeglądarce, ale kiedy zabieram je do mojego telefonu, po prostu znikają. Próbowałem już wszystkiego: sprawdzania skrzynek i pisowni. Próbowałem nawet przesłać obrazy na mój serwer strony internetowej i nic.

Każda pomoc w tym zakresie zostanie bardzo doceniona.

UPDATE

Używam tego kodu HTML, jest to ciąg JavaScript jak to jak ja wejścia jej podczas wykonywania:

"<p id=\"calculator\"><img id=\"images\" src=\"images/[email protected]\"><span id=\"converterTitles\">Calculator</span></p><hr><p id=\"distance\"><img id=\"images\" src=\"images/[email protected]\"><span id=\"converterTitles\">Distance Converter</span></p><hr><p id=\"area\"><img id=\"images\" src=\"images/[email protected]\"><span id=\"converterTitles\">Area Converter</span></p><hr><p id=\"volume\"><img id=\"images\" src=\"images/[email protected]\"><span id=\"converterTitles\">Volume Converter</span></p><hr><p id=\"mass\"><img id=\"images\" src=\"images/[email protected]\"><span id=\"converterTitles\">Mass Converter</span></p><hr><p id=\"force\"><img id=\"images\" src=\"images/[email protected]\"><span id=\"converterTitles\">Force Converter</span></p><hr><p id=\"power\"><img id=\"images\" src=\"images/[email protected]\"><span id=\"converterTitles\">Power Converter</span></p><hr><p id=\"energy\"><img id=\"images\" src=\"images/[email protected]\"><span id=\"converterTitles\">Energy Converter</span></p><hr><p id=\"temperature\"><img id=\"images\" src=\"images/[email protected]\"><span id=\"converterTitles\">Temperature Converter</span></p><hr><p id=\"dataStorage\"><img id=\"images\" src=\"images/[email protected]\"><span id=\"converterTitles\">Data Storage Converter</span></p><hr><p id=\"time\"><img id=\"images\" src=\"images/[email protected]\"><span id=\"converterTitles\">Time Converter</span></p><hr><p id=\"speed\"><img id=\"images\" src=\"images/[email protected]\"><span id=\"converterTitles\">Speed Converter</span></p><hr><p id=\"acceleration\"><img id=\"images\" src=\"images/[email protected]\"><span id=\"converterTitles\">Acceleration Converter</span></p><hr><p id=\"pressure\"><img id=\"images\" src=\"images/[email protected]\"><span id=\"converterTitles\">Pressure Converter</span></p><hr><p id=\"density\"><img id=\"images\" src=\"images/[email protected]\"><span id=\"converterTitles\">Density Converter</span></p><hr><p id=\"any\"><img id=\"images\" src=\"images/[email protected]\"><span id=\"converterTitles\">The \"Any\" Converter</span></p><hr><p id=\"angle\"><img id=\"images\" src=\"images/Angle.png\"><span id=\"converterTitles\">Angle Converter</span></p><hr>"

Jest złożony z postaciami pomijania więc może to być trudne do odczytania . Ale rozumiesz. Najprostsze tagi nie działają. Mam trochę kodu CSS, który wykonuje niektóre obrazy tła za pomocą url(), który również nie jest wyświetlany.

Odpowiedz

9

Udało mi się to naprawić, po prostu rzucając obrazy do folderu głównego i łącząc się z tym. Może nie być najlepszym rozwiązaniem, ale działa! Mam nadzieję, że pomoże to każdemu widzowi. Aplikacje aplikacji PhoneGap wymagają, aby obrazy znajdowały się w folderze głównym.

+1

W zeszłym tygodniu miałem swoją aplikację internetową wyświetlającą obrazy w porządku i znajdowały się w podfolderach. W tym tygodniu przeskoczyłem moją aplikację do nowego folderu i ponownie zbudowałem, ale obrazy nie będą wyświetlane.Nie było żadnych zmian w kodzie, wszystkie linki względne. – Mal

+0

@Mal Spróbuj umieścić je w folderze głównym aplikacji. Powinno działać. Może to być kłopotliwe dla niektórych programistów, ale jest to jedyne rozwiązanie, dopóki PhoneGap Build coś z tym nie zrobi. –

+1

Dzięki za sugestię. Pobrałem plik .ipa i rozpakowałem go. Okazuje się, że utworzony podfolder został usunięty podczas kompilacji. Obrazy można umieszczać tylko w istniejącym katalogu lub katalogu głównym, zgodnie z sugestiami. – Mal

28

Miałem podobny problem. Moim rozwiązaniem było zmiana ścieżek obrazu poprzez usunięcie wiodącego "/": /img/my_icon.png -> img/my_icon.png, wtedy pojawiły się moje ikony w aplikacji. Wygląda jednak na to, że twoje ścieżki są poprawne.

+4

Mam również problem i to rozwiązanie działa dla mnie – avmauricio

+0

To również rozwiązało mój problem. –

2

Miałem problemy z rozpoznawaniem wielkości liter w nazwach plików, po zmianie wszystkich nazw plików obrazów na małe litery i odnoszeniu ich do tej samej obudowy, wszystko zaczęło działać poprawnie.

+0

Miałem też problemy z przypadkiem. Próbowałem wyświetlić "image.jpg" i działało na moim laptopie dobrze. Podczas kompilacji na urządzenie z Androidem aplikacja nic nie pokazywała, dopóki nie wypróbowałem "image.JPG" zamiast tego (co dokładnie pasowało do nazwy pliku). –

0

Znalazłem, że obie pozostałe odpowiedzi są poprawne. Przynajmniej dla mnie obrazy muszą znajdować się w folderze głównym, a wielkość liter w kodzie HTML musi odpowiadać rzeczywistej wielkości pliku obrazu.

Używam Nomad, więc nie wiem, czy jest to problem Nomada podczas pakowania aplikacji lub problemu PhoneGap.

0

Miałem problem z tym, kiedy korzystałem z zapytań o media w CSS. Zapomniałem wziąć pod uwagę, że ścieżki obrazu CSS są względne w stosunku do arkusza stylów, a nie do dokumentu. Więc w moim przypadku, moja droga stała ../images/...

0

mogą być istotne dla deweloperów korzystających gulp budować swoje wnioski: jeśli obrazy nie są wyświetlane, sprawdź, gdzie obrazy są umieszczone wewnątrz www po gulp build.

W moim przypadku PhoneGap szukał zdjęć w folderze /www/css. Zmienianie zadań clean i images w celu odzwierciedlenia rozwiązania problemu.

Próbowałem ustawić obraz w tle za pomocą CSS; teraz działa, używając:

background-image: url("img/background.jpg") 
Powiązane problemy