Android 上的 Worklight CSS 找不到图像文件夹答案

【问题标题】：Worklight CSS on Android doesn't find the images folderAndroid 上的 Worklight CSS 找不到图像文件夹
【发布时间】：2013-10-23 08:18:34
【问题描述】：

在我的 css 中，我有一个这样的背景图像：

    background-image:url("../images/klasExFoto.png") !important;

在模拟器和网络浏览器中显示图像。当我在 Android 设备上运行它时，它在该文件夹中找不到图像。当我在 HTML 中设置图像时，它可以正常工作。

    <img src="images/klasExFoto.png" />

就像这样，它可以在浏览器和 Android 设备上运行。

如果我设置了不带“../”的背景图像，它在 Android 和网络浏览器上都不再起作用。

如何在 Android 上为 CSS 背景图像设置文件夹路径？

我使用 Worklight 6.0.0.1。

我的 CSS：

    #AddClassForm_Foto{
        width:140px;
        height:140px;
        background-image:url("../images/klasExFoto.png") !important;
        border:doubles 1px #dedede;
    }
    .formItem{
        margin-top:16px;
    }

我的 HTML：

    <div class="formItem">
    <label for="AddClassForm_Foto">Foto</label>
    <div id="AddClassForm_Foto"></div>
    </div>

我只在网络浏览器上看到一张图片，在 Android 中它不显示。

【问题讨论】：

在您的 CSS 背景图像中将文件夹路径设置为 images/klasExFoto.png。因为它总是只会去images文件夹中搜索图像。
如果我这样设置，它不适用于所有设备。
你的images文件夹在哪里？
@GrlsHu "NetworkError: 404 Not Found - 10.99.10.95:10080/Klappr/apps/services/preview/Klappr/common/…" 我使用了自定义 Worklight 图像文件夹。

标签： android css image background-image ibm-mobilefirst

【解决方案1】：

你没有提到任何版本。

我在 WL 6.0.0.1 项目中有以下内容：

img {

background-image:url("../images/icon.png")
}

并在 Android 4.1.2 和 4.3 上运行 android 环境。显示背景图像。

要么是特定于您正在使用的 Worklight 和 Android 版本的问题，要么是相对路径以外的问题。

【讨论】：

我用更多信息编辑了这个问题。我使用 WL 6.0.0.1 并没有看到图像。为什么要在 img 元素上使用背景图像？ @大卫

【解决方案2】：

看起来我的图片有一个大写字母 K，网络浏览器不介意，但 Android 有。

我将“../images/klasExFoto.png”替换为“../images/KlasExFoto.png”，现在一切正常。

【讨论】：

太好了，你解决了这个问题；您可以将此标记为已回答吗？谢谢。

【解决方案3】：

我同意这可能不是 WL 特定的问题。我建议您通过 CSS linter（例如http://csslint.net/）来验证最终的 CSS 文件是否存在语法错误。

作为另一个测试，将该规则移至 CSS 文件的最顶部，看看它是否会产生影响。不同的渲染器可能更能容忍语法错误。

查看 android/native/assets/www/default/css/MyCss.css 文件中的最终 CSS 是否存在任何明显问题，当 CSS 文件连接时。

【讨论】：