如何让图像显示在 phonegap 应用程序上答案

【问题标题】：How to get images to show on a phonegap application如何让图像显示在 phonegap 应用程序上
【发布时间】：2015-01-13 15:59:44
【问题描述】：

在过去的几个月里，我一直在为我参与的一个项目编写 phonegap 应用程序，试图鼓励孩子们对当地历史感兴趣，我刚刚完成了它，但是，不管我尝试了什么，我无法显示图像...

我一直在使用 Brackets 在 HTML/CSS/JS 中编写应用程序，当我使用实时调试工具和 Edge Inspect 对其进行测试时，它运行良好，但在使用 phonegap 构建应用程序时，图像只是不t 显示。

我用来放置图片的代码是：

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

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

包含 HTML 的文件夹也是包含图片文件夹的文件夹：

选项（HTML 文件夹）> 所有 html 文件和 img（图像文件夹）

在 img 中，图像使用相应的数字（1 到 13）进行索引。

编辑：文件路径在上面

如果有人能提供任何关于为什么这不起作用的见解，那就太棒了。

【问题讨论】：

那么您是通过 Adobe PhoneGap Build 使用实时调试吗？
抱歉，我刚刚意识到您说您使用的是 Edge Inspect。在我的应用程序中，我的代码与您的代码几乎相同并且工作正常。尝试以像素为单位对高度和宽度进行硬编码，以查看图像是否显示。
你能告诉我们你phonegap APP的Asset目录的文件夹结构吗？
如何找到资产目录？ :S
phonegap 应用的资产目录位置<your_project_name>\platforms\android\assets

标签： android html css image cordova

【解决方案1】：

确保您的文件夹结构如下所示，

这应该可以正常工作，请检查“img1”的图像扩展名。右键单击图像文件并查看属性并检查“文件类型：”并验证它确实是一个 .png 文件。

【讨论】：

我已经添加了我的文件结构。它与您上传的基本相同，但文件夹名称不同。
如何查看编辑？我对使用 stackoverflow 有点陌生，所以我不完全确定上面的所有内容：/
对不起，我的箭袋是空的。 :-(

【解决方案2】：

假设您的项目名称是“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目录并将压缩文件上传到build.phonegap.com

您现在可以访问 index.html 中的资源，例如 img1.png

<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

【讨论】：

好吧，那我的文件结构是这样的： PBHQ: GO WEST |__index.html |__options |__option1.html |__option2.html |__等等 |__css |__styles.css |__buttons.css |__photoswipe |__所有照片滑动的东西 |__js |__fastclick.js |__index.js |__iScroll.js |__jQuery2.0.3.js |__menu.js |__tauthorization.js 我不' t 有一个 config.xml 文件。这可能是图像无法正常工作的原因吗？
那行不通。我将编辑主帖以正确显示。

【解决方案3】：

通过在图像所在的位置放置一个 div 并将背景设置为图像来进行修复。不知道为什么它不起作用，但这似乎已经解决了它，所以是的。耶。

【讨论】：