ios - PhoneGap www 中的本地图像路径在 iOS 5 上不起作用

Question

这适用于 iOS 6 而不是 iOS 5，所以我假设它是 webkit 的东西。

我的www/images文件夹中有一张图片，所以我使用以下 html：

<img src="images/img.gif" />

然而，图像显示为带有问号的蓝色方块（iOS 的图像未找到图像）。

我怎样才能让这条路径同时在 iOS 5 和 iOS 6 上工作？

谢谢。

Answer 1

我注意到同样的问题，相同的代码在本地浏览器和 iOS6 及更高版本中运行良好，但在 iOS4.3、5.0 或 5.1 中不显示图像。

对我有用的解决方案是改用背景图像并使用 CSS 对其进行样式设置，这也意味着您可以提供高分辨率视网膜图像并为非视网膜设备缩放它。

将您的 IMG 标签替换为：

<div id="myImage" />

在您的 CSS 文件中：

#myImage
{
    background-image:url("../../assets/images/img.gif"); // The relative path from your CSS file to your image
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size:cover;
    width:100px;  // Actual image size is 200px x 200px
    height:100px;
}

CSS 文件中图像的相对路径似乎可以正常工作，但该路径必须相对于 css 文件而不是您的 html 文件。

如果您希望图像在非视网膜设备上显示 100 像素 x 100 像素的图像，您应该创建一个两倍大小（200 像素 x 200 像素）的图像，并在您的应用程序运行时让 background:cover 自动更改为更高分辨率在视网膜设备上。