2013-10-26 17 views
6

Ho recentemente deciso di iniziare a utilizzare PhoneGap Build per creare app utilizzando tecnologie web. Si prega di notare che sto usando PhoneGap Build not PhoneGap e quindi non mantengo le API native.Immagini non visualizzate nell'applicazione PhoneGap Build

Uso tag HTML img per visualizzare le immagini, naturalmente, e ho qualche problema. Le immagini vengono visualizzate bene in un browser, ma quando le prendo sul mio telefono scompaiono. Ho provato di tutto: controllo del caso e ortografia. Ho anche provato a caricare le immagini sul mio server del sito web e nulla.

Qualsiasi aiuto su questo sarà molto apprezzato.

UPDATE

io uso questo HTML, è una stringa JavaScript come è così che ho in ingresso che in fase di esecuzione:

"<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/Hand-[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>"

E 'archiviato con i caratteri di salto quindi potrebbe essere difficile da leggere . Ma ottieni il succo. I tag più semplici non funzionano. Ho del CSS che fa alcune immagini di sfondo usando url() che non mostra nemmeno.

risposta

9

Sono stato in grado di risolvere il problema semplicemente lanciando le immagini nella cartella principale e collegandole a tale. Potrebbe non essere la soluzione migliore ma funziona! Spero che questo aiuti tutti gli spettatori. Le app PhoneGap Build richiedono che le immagini si trovino nella cartella principale.

+1

La scorsa settimana ho avuto la mia app Web visualizzare le immagini e sono stati in sottocartelle. Questa settimana ho portato la mia app su una nuova cartella e la ho ricostruita ma le immagini non verranno visualizzate.Non ci sono state modifiche al codice, tutti i collegamenti relativi. – Mal

+0

@Mal Prova a metterli nella cartella principale della tua app. Dovrebbe funzionare. Potrebbe essere complicato per alcuni sviluppatori, ma è l'unica soluzione fino a quando PhoneGap Build non fa qualcosa al riguardo. –

+1

Grazie per il suggerimento. Ho scaricato il mio file .ipa e l'ho decompresso. Risulta che la sottocartella che ho creato è stata rimossa durante la compilazione. È possibile posizionare le immagini solo in una cartella preinstallata o root come suggerito. – Mal

28

Ho avuto un problema simile. La mia soluzione è stata quella di cambiare i percorsi delle immagini rimuovendo la "/" iniziale: /img/my_icon.png -> img/my_icon.png, poi sono apparse le mie icone in-app. Sembra che i tuoi percorsi siano corretti.

+4

Ho avuto anche il problema e questa soluzione funziona per me – avmauricio

+0

Anche questo ha risolto il mio problema. –

2

Ho avuto problemi con la distinzione tra maiuscole e minuscole, dopo aver modificato tutti i nomi dei file immagine in minuscolo e facendo riferimento allo stesso alloggiamento, tutto ha funzionato correttamente.

+0

Ho avuto problemi anche con il caso. Stavo cercando di visualizzare "image.jpg" e ha funzionato bene con il browser del mio portatile. Quando è stato compilato su un dispositivo Android, l'app non ha mostrato nulla fino a quando non ho provato "image.JPG" (che corrispondeva esattamente al nome del file). –

0

Ho trovato che entrambe le altre risposte sono corrette. Almeno per me, le immagini devono essere nella cartella radice e il caso nell'HTML deve corrispondere al caso del nome del file immagine reale.

Sto usando Nomad, quindi non so se si tratta di un problema di Nomad nel confezionamento dell'applicazione o di un problema di PhoneGap.

0

Ho riscontrato un problema durante l'utilizzo di query multimediali in CSS. Ho dimenticato di considerare che i percorsi delle immagini CSS sono relativi al foglio di stile, non al documento. Quindi, nel mio caso, il mio percorso è diventato ../images/...

0

possono essere rilevanti per gli sviluppatori che utilizzano gulp per costruire le loro applicazioni: se le immagini non vengono visualizzati, controlla dove le immagini vengono collocati all'interno www dopo un gulp build.

Nel mio caso PhoneGap cercava immagini nella cartella /www/css. Modifica delle attività clean e images per riflettere che ha risolto il problema.

Stavo tentando di impostare un'immagine di sfondo con CSS; funziona ora utilizzando:

background-image: url("img/background.jpg") 
Problemi correlati