javascript - 仅当应用程序在 Android 中运行时，如何将 "android_asset/www/"添加到 CSS 中的图像路径？

Question

因此，我正在使用 Ionic 框架和 AngularJS 构建一个混合应用程序。我使用以下代码创建了一个自定义样式的音量 slider :

样式.css

input[type=range] {
   -webkit-appearance: none;    
   height: 9px;
   background-image: url("/img/bar.png");
   border: none;
   width: 280px;

}

input[type=range]::-webkit-slider-thumb {
   -webkit-appearance: none;
   border: none;
   height: 30px;
   width: 30px;   
   background-image: url("/img/slider.png");

}

当我在浏览器中测试它时，它工作正常。但问题是:要在 Android 中运行它，我必须在图像路径中添加“android_asset/www/”。对于我在 html 中使用的所有图像，我在 js 文件中创建了一个函数来检测应用程序是否在 Android 中运行，如果它返回 true，该函数会自动添加“android_asset/www/”。但在我的例子中，音量 slider 样式的图像是在 CSS 中添加的，所以我无法调用 js 函数。

那么，我该如何解决呢？仅当它在 Android 中运行时，如何将“android_asset/www/”添加到 CSS 中的图像路径？有没有办法在CSS中调用js函数？是否可以从 html 更改图像在 CSS 中的路径？

这是js函数的代码:

app.js

$scope.convertAndroid = function(src){
        if(device.platform.toLowerCase() === "android") { src = "/android_asset/www" + src; }
        return src;
};

这就是我在 html 中调用函数的方式

index.html

 <img src={{convertAndroid('/img/something.png')}}>

Answer 1

嗯，这里的一般概念有误。混合应用程序为每个平台(即 Web、Android、IOS 等)创建单独的 WWW 文件夹。例如，以下是一般层次结构:

root project
----wwww
--------platforms
------------android
----------------assets
--------------------www
------------ios

这意味着，每个平台都将相关的WWW 文件夹视为根目录。如果你在 Android 上运行，它会读取 WWW inside assets。您只需为元素中的每个 WWW 文件夹创建相同的内容。