How to add "android_asset/www/" to the image's path in the CSS only if app is running in Android?

Question

So, I'm building a hybrid app using the Ionic framework and AngularJS. I created a volume slider with a custom style, using the code below:

style.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");

}

When I test it in the browser it works fine. But the problem is: to run it in Android I have to add "android_asset/www/" in the image path. For all the images that I'm using in the html, I made a function in the js file that detects if the app is running in Android, and if it returns true, the function automatically add the "android_asset/www/". But in my case, the images for the volume slider's style are added in the CSS, so I can't call the js function.

So, how can I fix it? How to add "android_asset/www/" to the image's path in the CSS only if it is running in Android? Is there a way to call the js function in CSS? Is it possible to change the image's path in CSS from the html?

This is the js function's code:

app.js

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

And this is how I invoke the function in the html

index.html

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

Answer 1

Well, there is a mistake in the general concept here. A hybrid application creates separate WWW folders for each platform, i.e. web, Android, IOS, etc. For example, following is the general hierarchy:

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

It means that, every platform sees the related WWW folder as the root directory. If you are running on Android, it will read the WWW inside assets. You just have to create the same content for every WWW folder in your project.