8

我最近决定开始使用 PhoneGap Build 来创建使用 Web 技术的应用程序。请注意，我使用的是 PhoneGap Build 而不是 PhoneGap，因此我不维护本机 API。

我当然使用 HTML img 标签来显示图像，但我遇到了一些麻烦。这些图像在浏览器中显示得很好，但是当我把它带到我的手机上时，它们就消失了。我已经尝试了一切：检查大小写和拼写。我什至尝试将图像上传到我的网站服务器，但什么也没有。

对此的任何帮助将不胜感激。

更新

我使用这个 HTML，它是一个 JavaScript 字符串，因为这就是我在运行时输入它的方式：

"<p id=\"calculator\"><img id=\"images\" src=\"images/calculator@2x.png\"><span id=\"converterTitles\">Calculator</span></p><hr><p id=\"distance\"><img id=\"images\" src=\"images/Ruler@2x.png\"><span id=\"converterTitles\">Distance Converter</span></p><hr><p id=\"area\"><img id=\"images\" src=\"images/Line-Graph-1@2x.png\"><span id=\"converterTitles\">Area Converter</span></p><hr><p id=\"volume\"><img id=\"images\" src=\"images/box3@2x.png\"><span id=\"converterTitles\">Volume Converter</span></p><hr><p id=\"mass\"><img id=\"images\" src=\"images/dumbells@2x.png\"><span id=\"converterTitles\">Mass Converter</span></p><hr><p id=\"force\"><img id=\"images\" src=\"images/circle-east@2x.png\"><span id=\"converterTitles\">Force Converter</span></p><hr><p id=\"power\"><img id=\"images\" src=\"images/Lightbulb@2x.png\"><span id=\"converterTitles\">Power Converter</span></p><hr><p id=\"energy\"><img id=\"images\" src=\"images/Refresh@2x.png\"><span id=\"converterTitles\">Energy Converter</span></p><hr><p id=\"temperature\"><img id=\"images\" src=\"images/thermometer@2x.png\"><span id=\"converterTitles\">Temperature Converter</span></p><hr><p id=\"dataStorage\"><img id=\"images\" src=\"images/inbox@2x.png\"><span id=\"converterTitles\">Data Storage Converter</span></p><hr><p id=\"time\"><img id=\"images\" src=\"images/Clock@2x.png\"><span id=\"converterTitles\">Time Converter</span></p><hr><p id=\"speed\"><img id=\"images\" src=\"images/jeep@2x.png\"><span id=\"converterTitles\">Speed Converter</span></p><hr><p id=\"acceleration\"><img id=\"images\" src=\"images/Cue-Forward@2x.png\"><span id=\"converterTitles\">Acceleration Converter</span></p><hr><p id=\"pressure\"><img id=\"images\" src=\"images/Parking@2x.png\"><span id=\"converterTitles\">Pressure Converter</span></p><hr><p id=\"density\"><img id=\"images\" src=\"images/beaker@2x.png\"><span id=\"converterTitles\">Density Converter</span></p><hr><p id=\"any\"><img id=\"images\" src=\"images/Hand-Open@2x.png\"><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>"

它使用跳过字符归档，因此可能难以阅读。但你明白了要点。最简单的标签不起作用。我有一些 CSS 使用 url() 做一些背景图像，但也没有显示。

4

6 回答 6

34

我有一个类似的问题。我的解决方案是通过删除前导“/”来更改图像路径：/img/my_icon.png -> img/my_icon.png，然后我的应用内图标出现了。看起来你的路径是正确的。

于 2013-10-28T18:52:23.767 回答
10

我可以通过将图像放入根文件夹并链接到它来修复它。可能不是最好的解决方案，但它有效！希望这可以帮助任何观众。PhoneGap Build 应用程序要求图像位于根文件夹中。

于 2013-10-26T23:59:43.067 回答
2

我遇到了文件名区分大小写的问题，在将所有图像文件名更改为小写，并用相同的大小写引用相同的文件名后，一切都开始正常工作了。

于 2014-04-02T16:02:41.043 回答
0

我发现其他两个答案都是正确的。至少对我来说，图像必须在根文件夹中，并且 HTML 中的大小写必须与实际图像文件名大小写匹配。

我正在使用Nomad，所以我不知道这是打包应用程序时的 Nomad 问题还是 PhoneGap 问题。

于 2014-07-26T21:16:47.887 回答
0

可能与gulp用于构建其应用程序的开发人员有关：如果未显示图像，请检查图像www在gulp build.

就我而言，PhoneGap 正在搜索/www/css文件夹中的图像。更改clean和images任务以反映解决了我的问题。

我试图用 CSS 设置背景图像；它现在使用：

background-image: url("img/background.jpg")
于 2017-09-18T19:05:43.493 回答
0

当我在 CSS 中使用媒体查询时，我遇到了这个问题。我忘了考虑 CSS 图像路径是相对于样式表的，而不是相对于文档的。所以就我而言，我的道路变成了../images/...

于 2015-09-21T14:24:02.110 回答