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

Question

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

我一直在使用 Brackets 在 HTML/CSS/JS 中编写应用程序，当我使用实时调试工具和 Edge Inspect 测试它时它工作正常但是当涉及到使用 phonegap 构建应用程序时，图像只是不显示。

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

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

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

里面有HTML的文件夹也是里面有图片的文件夹:

Options (the HTML folder) > all the html files & img (the image folder)

在 img 中，图像使用相应的编号进行索引，从 1 到 13。

编辑：文件路径在上面

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

Answer 1

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

这应该可以正常工作，请检查 "img1" 的图像扩展名。右键单击图像文件并查看属性并检查 "Type of file:" 并确认它确实是一个 .png 文件。

Answer 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目录并将zip文件上传到build.phonegap.com

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

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

编辑 1：

您还可以在这里查看 phonegap 构建教程。 https://helpx.adobe.com/phonegap-build/how-to/phonegap-build-first-app.html?set=phonegap-build--get-started--ready-to-use

Answer 3

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

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

How to get images to show on a phonegap application

android

html

css

image

cordova