Html 图像未显示在 PhoneGap Build 应用程序中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19607284/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Images not showing in PhoneGap Build application
提问by Youssef Moawad
I have recently decided to start using PhoneGap Build to create apps using web technologies. Please note that I'm using PhoneGap Build not PhoneGap and so I don't maintain native APIs.
我最近决定开始使用 PhoneGap Build 来创建使用 Web 技术的应用程序。请注意，我使用的是 PhoneGap Build 而不是 PhoneGap，因此我不维护本机 API。
I use HTML img tags for displaying images of course and I'm having some trouble. The images display nicely in a browser but when I take it to my phone they just disappear. I've tried everything: checking case and spelling. I even tried uploading the images to my website server and nothing.
我当然使用 HTML img 标签来显示图像，但遇到了一些麻烦。图像在浏览器中显示得很好，但当我把它带到我的手机时，它们就消失了。我已经尝试了一切：检查大小写和拼写。我什至尝试将图像上传到我的网站服务器，但什么也没有。
Any help on this will be greatly appreciated.
对此的任何帮助将不胜感激。
UPDATE
更新
I use this HTML, It's a JavaScript string as that's how I input it during runtime:
我使用这个 HTML，它是一个 JavaScript 字符串，因为这是我在运行时输入它的方式：
"<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/[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>"
"<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/[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>"
It's filed with skip characters so it might be hard to read. But you get the gist. The simplest tags don't work. I have some CSS that does some background images using url() that also doesn't show.
它包含跳过字符，因此可能难以阅读。但是你明白了要点。最简单的标签不起作用。我有一些 CSS 使用 url() 做一些背景图像，但也没有显示。
回答by Dan
I had a similar problem. My solution was to change image paths by removing the leading "/": /img/my_icon.png -> img/my_icon.png, then my in-app icons showed up. It looks like your paths are correct though.
我有一个类似的问题。我的解决方案是通过删除前导“/”来更改图像路径：/img/my_icon.png -> img/my_icon.png，然后我的应用内图标出现了。看起来你的路径是正确的。
回答by Youssef Moawad
I was able to fix it by just throwing the images into the root folder and linking to that. May not be the best solution but it works! Hope this helps any viewers. PhoneGap Build apps require the images to be in the root folder.
我只需将图像放入根文件夹并链接到该文件夹即可修复它。可能不是最好的解决方案，但它有效！希望这可以帮助任何观众。PhoneGap Build 应用程序要求图像位于根文件夹中。
回答by Gokulnath
I had problems with file name case sensitivity, after changing all the image file names to lower case, and referring the same by the same casing, everything started working fine.
我在文件名区分大小写方面遇到了问题，在将所有图像文件名更改为小写并用相同的大小写引用相同的文件后，一切都开始正常工作。
回答by CraigP
I found that both the other answers are correct. At least for me, the images must be in the root folder and the case in the HTML must match the actual image file name case.
我发现其他两个答案都是正确的。至少对我来说，图像必须在根文件夹中，并且 HTML 中的大小写必须与实际的图像文件名大小写相匹配。
I'm using Nomad, so I don't know if this is a Nomad problem in packaging the app or a PhoneGap problem.
我正在使用Nomad，所以我不知道这是打包应用程序时的 Nomad 问题还是 PhoneGap 问题。
回答by JstnPwll
I had a problem with this when I was using media queries in CSS. I forgot to take into account that CSS image paths are relative to the stylesheet, not to the document. So in my case, my path became ../images/...
我在 CSS 中使用媒体查询时遇到了这个问题。我忘了考虑 CSS 图像路径是相对于样式表的，而不是相对于文档的。所以就我而言，我的路径变成了../images/...
回答by Nathan Beck
May be relevant to devs using gulpto build their applications: if images aren't showing up, check out where the images are being placed within wwwafter a gulp build.
可能与使用的开发者gulp来构建他们的应用程序：如果图像显示不出来，检查出其中图像被放置在www后gulp build。
In my case PhoneGap was searching for images in /www/cssfolder. Changing the cleanand imagestasks to reflect that solved my issue.
就我而言，PhoneGap 正在/www/css文件夹中搜索图像。更改clean和images任务以反映解决了我的问题。
I was attempting to set a background-image with CSS; it works now using:
我试图用 CSS 设置背景图像；它现在使用：
background-image: url("img/background.jpg")
