Javascript 如何加上「；android_asset/www/“的；到图像'；仅当应用程序在Android中运行时，CSS中的路径是什么？

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

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

}

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

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

那么，我该如何修复它呢？只有在安卓系统中运行时，如何将“安卓资产/www/”添加到CSS中的图像路径？有没有办法在CSS中调用js函数？是否可以从html更改CSS中图像的路径

这是js函数的代码：

app.js

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

}

$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')}}>

---

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

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

---

这意味着，每个平台都将相关的WWW文件夹视为根目录。如果你在安卓上运行，它将读取资产内部的WWW。您只需为项目中的每个WWW文件夹创建相同的内容。

好吧，这里的一般概念有一个错误。混合应用程序为每个平台（即web、Android、IOS等）创建单独的WWW文件夹。例如，以下是一般层次结构：

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

---

这意味着，每个平台都将相关的WWW文件夹视为根目录。如果你在安卓上运行，它将读取资产内部的WWW。您只需为项目中的每个WWW文件夹创建相同的内容。

只需修改该函数即可更改元素的backgound图像url？虽然从技术上讲，可以按照您建议的方式执行，但我认为这不是最佳做法。最好考虑使用GULP或GRUTT来根据你的构建目标预先编译到CSS。只需修改函数来改变元素的背景图像URL。虽然在技术上可能按照你提出的方式来做，但我认为这不是最好的做法。最好考虑使用GULP或GRUTT来根据你的构建目标预先编译到CSS。如果你在Android上运行应用程序，根目录将是Android/assets/www而不是www。因此，只要www的内容相同，你的图像路径就应该有效。例如，您的路径是/img/slider.png。在web上，这将指向www/img/slider.png，在Android上，这将指向assets/www/img/slider.png当我向www文件夹添加图像时，它会自动将图像添加到Android/assets内的www文件夹。即使有了android/assets中的图像，当我在android中运行应用程序时，它仍然无法工作，我仍然必须在图像路径中添加“android_asset/www/”。在我的项目中，这是层次结构：rootproject/platforms/android/assets/www。platforms文件夹不在rootproject/wwwAre中。您是作为应用程序（.apk）运行它，还是在移动浏览器上运行它？我在设备上运行它。哦，我找到了解决方案。我真的不需要在路径中添加“android_asset/www/”，我只需要添加“./”，比如：背景图像：url（../img/slider.png）。现在它可以在浏览器和设备中工作。谢谢你的帮助！这是正确的。如果你在Android上运行应用程序，根目录将是Android/assets/www而不是www。因此，只要www的内容相同，你的图像路径就应该有效。例如，您的路径是/img/slider.png。在web上，这将指向www/img/slider.png，在Android上，这将指向assets/www/img/slider.png当我向www文件夹添加图像时，它会自动将图像添加到Android/assets内的www文件夹。即使有了android/assets中的图像，当我在android中运行应用程序时，它仍然无法工作，我仍然必须在图像路径中添加“android_asset/www/”。在我的项目中，这是层次结构：rootproject/platforms/android/assets/www。platforms文件夹不在rootproject/wwwAre中。您是作为应用程序（.apk）运行它，还是在移动浏览器上运行它？我在设备上运行它。哦，我找到了解决方案。我真的不需要在路径中添加“android_asset/www/”，我只需要添加“./”，比如：背景图像：url（../img/slider.png）。现在它可以在浏览器和设备中工作。谢谢你的帮助！