如何將圖像顯示在電話應用程序

在過去的幾個月中，我一直在爲我參與的項目開發電話應用程序，試圖鼓勵孩子對本地歷史感興趣，而我我剛剛完成它，但是，無論我嘗試什麼，我無法獲取圖像顯示...如何將圖像顯示在電話應用程序

我一直在使用括號在HTML/CSS/JS中編寫應用程序，它工作正常我使用實時調試工具和Edge Inspect對其進行測試，但是在使用phonegap構建應用程序時，圖像不顯示。

我用來放置圖像的代碼是：

//THE HTML 
<img class = "thumbnailImg" src = "img/img1.png"> 

//THE CSS 
.thumbnailImg { 
    width: 100% !important; 
}

在它的HTML文件夾也與圖像中的文件夾的文件夾：

選項（該HTML文件夾）>所有HTML文件& IMG（圖像文件夾）

在img，圖像索引與相應的數字，1至13 。

編輯：文件路徑是上述 file structure of the phonegap application

如果有人可以提供任何見解，爲什麼這不工作，那簡直是真棒。

來源

2015-01-13 Olly John

那麼您是否正在使用通過Adobe PhoneGap Build進行實時調試？ – EricBellDesigns

對不起，我剛剛意識到你說你正在使用Edge Inspect。在我的應用程序中，我的代碼與您的代碼幾乎完全相同，並且工作正常。嘗試以像素爲單位對高度和寬度進行硬編碼，以查看圖像是否顯示。 – EricBellDesigns

你能告訴我們你手機APP的** Asset **目錄的文件夾結構嗎？ – frank

通過將div放置在圖像所在的位置並將背景設置爲圖像，從而實現了修復。不知道爲什麼它不工作，但這似乎已經修復它，所以耶。好極了。

來源

2015-02-01 00:56:24

確保文件夾結構看起來像下面，

Make 這應該正常工作，請檢查「IMG1」的形象推廣。右鍵單擊圖像文件並查看屬性，然後選中「文件類型：」並驗證它確實是.png文件。

來源

2015-01-14 11:53:56 locknies

我已經添加了我的文件結構，它基本上與您上傳的文件結構相同，但是文件夾名稱不同 –

檢查編輯 – locknies

如何查看編輯？我是一種新的使用stackoverflow，所以我不完全確定所有的東西：/ –

假設您的項目名稱是'My_first_PG_App'。
假設您有適用於您的應用程序的以下資源文件。

HTML文件
1）的Index.html（此文件是必須的。這是你的PG App的起點）。

圖像文件
1）img1.png

CSS文件
1）my_first_pg_app.css

然後，你需要創建下面的目錄結構，並將這些文件在適當的位置。

+My_first_PG_App <directory> 
     |__ index.html 
     |__ config.xml 
     |__img <directory> 
      |__ img1.png 
     |__css <directory> 
      |__ my_first_pg_app.css

然後壓縮的My_first_PG_App目錄和上傳zip文件到build.phonegap.com

現在您可以在您的索引訪問的資源e.g img1.png。HTML作爲

<img class = "thumbnailImg" src = "img/img1.png">

EDIT1：

您還可以在這裏一看的PhoneGap構建教程。 https://helpx.adobe.com/phonegap-build/how-to/phonegap-build-first-app.html?set=phonegap-build--get-started--ready-to-use

來源

2015-01-15 16:31:23 frank

那麼沒有工作。我將編輯主帖以正確顯示。 –

如何將圖像顯示在電話應用程序

回答

相關問題