jQuery Mobile数据图标在移动设备上无法显示

Question

我有一个移动Web应用程序（.NET MVC），我正在使用JQuery Mobile（beta 3和jQuery 1.6.3）。我的问题是关于各种元素上的属性'data-icon'。例如，我有一个元素：

<a href="@Url.Action("Index", "Home")" data-icon="home" data-iconpos="notext">Home</a>

当我在本地运行应用程序时，一切都如预期。有一个小圆形按钮，里面有“主页”图像。当我将应用程序部署到我的主机（Arvixe）时，在Chrome中，同样的按钮呈现为预期，但在我的手机（Nexus One）上则不是。在我的手机上，主页图标图像根本不显示。

JQuery mobile以以下方式引用图像精灵：

background-image:url(images/icons-18-white.png);

我可以验证这张图片确实存在于正确的位置，因为它在桌面浏览器上显示出来，我可以通过URL（桌面和移动设备）访问它，我的主机日志显示该URL的请求返回200响应。我甚至将我的Web应用程序连接到weinre服务器进行了托管，并且我可以验证DOM元素具有正确的图像路径。更奇怪的是，当我在手机上访问jquerymobile.com时，相同的图标出现了，问题似乎仅局限于我的托管站点。

我是否忽略了什么？谢谢。

- Jon

---

我认为你的代码没有问题。你是否将图片托管在你的服务器上？还是引用了jQM托管的版本？如果没有，请尝试将它们托管在你的服务器上。 - rlemon

是的，这两张图片和jquery/jquery mobile都托管在我的服务器上，并且我正在从那里引用它们。 - Jon

Answer 1

我认为我可能已经解决了这个问题。当从jQuery mobile beta 2升级到3时，我没有同时升级相应的图片。获取更新的图片似乎解决了问题。

- Jon

---

是的，我也遇到了同样的问题，我只升级了JS和CSS，忘记了图片文件夹。奇怪的是，在iOS和桌面浏览器上图标仍然出现了！只是在Android上无法工作。 - georgiecasey

Answer 2

请将图像文件夹（来自jquery-mobile下载的zip文件）与您的css文件放在一起。

例如：如果您已将.css文件复制到名为“some location”的某个位置

d:\project\styles\jquery.mobile-1.x.x.css

请将图像文件夹放置如下所示。

d:\projects\styles\images

- PSR

Answer 3

您需要在锚点上设置data-role="button"，以便在jQM(jQuery Mobile)中它们显示为按钮。 在这里查看

<a href="#" data-role="button" data-icon="home" data-iconpos="notext">Home</a>

这是我能想到的唯一事情。

- rlemon

---

谢谢您的建议，但那并不能解决问题。而且，并不是所有按钮都需要标记为"data-role =“button”"。在这种情况下，锚点位于标题栏中，就像这个例子：http://jquerymobile.com/demos/1.0b3/docs/toolbars/docs-headers.html。 - Jon

Answer 4

最新的jquerymobile已经解决了这个问题。如果没有，您需要检查以下步骤。

• 检查jquerymobile和jquerymobile CSS的图像文件夹是否在同一目录中
• 如果您将jquerymobile CSS放在单独的文件夹中，则需要更改此样式表中的“路径”

- PPShein

---

你所说的最新版本是指每夜构建版还是Beta 3版（我正在使用）？请注意，根据上述内容，images文件夹与JQuery移动CSS文件在同一目录下。 - Jon