How to get the path of the image uploaded in appery.io website's development environment?

[LS]

I am using appery.io website's development environment.
I want to put a background image on a circular button.
Button id is: home_btn, and I am using css class for that:
.home{
width: 20px;
height: 20px;

Code: Select all

     -moz-border-radius: 40px;  
     -webkit-border-radius: 40px;  
     border-radius: 40px;  
 } 

The last three line I have added is to get a circular shape button.

I added the css class to home_btn properties-Class Name.

I have uploaded the image inside SOURCE at :

WEB_RESOURCES-files-resources-image-icon1.png,

I have tried by putting:

Code: Select all

 background-image: url("../resources/image/icon1.png") !important;  

 background-image: url("../files/views/assets/image/icon1.png")!important; 

 background: url("../files/views/assets/image/icon1.png")!important; 

url("..\files\views\assets\image\icon1.png")

url("files/views/assets/image/icon1.png")

url("files\views\assets\image\icon1.png")

inside the home class, none of them is working, can you tell me what ".." represents in the url?

I don't know how to get the path of the file in code so that I can use it in the CSS class using the appery.io development website itself.

Please help!

[BananaGator]

".." means parent directory. "/files" would look for the files directory in the root (do not do this in Appery, phones will look for it in their base file system). "../files/" would look up one directory from where the current file is, "../../" would go up two directories, and so on.

If a visual would help, check out CSS Trick's post: https://css-tricks.com/quick-reminder...

[LS]

so what should I write in the url, I am using the appery.io website's development environment.

[BananaGator]

Can you post a screenshot of your files list opened on the Source tab? Without knowing where your CSS file is in relation to the file you are trying to associate, it is impossible to know.

[Illya Stepanov]

Hi -

Also you can use our helper JS method to return image URL path: https://devcenter.appery.io/documenta...

[LS]

thanks for the link you posted, it worked!

[Ana Rewis]

Hi,

I'm Ana Rewis, Romania, Appery.io app developer.

I have encountered the problem you had on this topic.

Could you please let me know how you solved this problem?

Thank you in advance.

Kind Regards
Ana

[John Black]

Illya -

You mention the JS helper, Apperyio.getImagePath(), however, that only works in JQuery projects. When used in an Appery Ionic/Angular project, it returns the error "Apperyio.getImagePath is not a function". What is the equivalent command for an Appery Ionic/Angular project?

Thanks.

[Serhii Kulibaba]

Hello John,

It it better don't change HTML layout with AngularJS. Please use direct links to files in the HTML layout of the page for that.
E.g. you have a file test.png in the Media Manager.

Use ng-src=files/images/{filename}

Set variable "filename":

$scope.filename = "test.png";

AngularJS automatically change value of the attribute "src" with your file

[John Black]

That's fine and you're assuming that I'm asking to modify HTML controls but what I'm trying to do is alter a JS library to work within the Appery environment. The JS Helper was just going to do that: help me determine the path of an image file uploaded through the Media Manager. This JS code references a couple of graphic elements using a directory beneath the location of the JS code. But since Appery places images in a different folder than the JS code, I needed to alter the library to point to the correct location.

Searches in this forum brought up different answers for the location from different employees. I tried them and none worked. But your answer did contain the path I needed and the JS library is working fine now. I imagine the changes over the past year(s) to Appery's environment has made their answers obsolete and yours, currently, the correct one.

Thanks for your help.