iOS How to access Library in CSS Url's?


Tags: javascript,ios,css,cordova

Problem :

I have multiple images that are fetched from an API and recorded like

Library/NoCloud/images/marble.png

In javascript-side, I used to display images using DOM elements and CSS properties using

<cover><img src="images/marble.png"/></cover>

However, now that I am using the Library folder (because it's forbidden to write in app bundle), I cannot access those images in the Library through CSS url directly. How to reference them in this case?



Solution :

I resolved the issue by setting the path directly. I get it from:

 window.resolveFileSystem(cordova.file.dataDirectory, function(dir){
     setCSSBackgroundWithPath(dir.nativeURL);
 });

In CSS, both

<img src="dir.nativeURL/path/to/image.png"/>

and

<cover style="background-image: url(dir.nativeURL/path/to/image.png)"></cover>

works ok.

Note: Actual setting of CSS is not handled this way, I left off the implementation details here just to say this works


    CSS Howto..

    How I can get an Image height and divide it by 2 using Jquery

    Gantry Framework-Joomla How to edit logo from CSS

    How to add an existing class to td in css file?

    How do you create a link out of circular text with JavaScript and CSS?

    How can I use CSS to set as my
  • background if I'm using the Zend framework?
  • How to show a notification bar on Top after n seconds with transition from top to down?

    How to change css href=“” using javascript? [duplicate]

    how to set anchor tag text width using css?

    How to create correct .css for Html.TextBoxFor

    How can I make a div element float left after another float left while still filling the rest of the parent's width?

    How to scroll in a div?

    How to position background image in a button

    Fixing GoogleMonkeyR column width issue. How to change a script's CSS?

    How can I apply a css transition to an element when its parent is hovered?

    How to align an image on css?

    How to horizontally scroll an inner div with text wrapping

    How to set Highcharts data series in x-axis using crosshairs?

    How can I hide the backface of a block element rotated with transform: rotateX()?

    Add CSS Style to textarea that shows XML

    In html how do I have table within table look visually the same as if I didnt have the inner table

    How do I avoid gap when using z-index in CSS?

    How to select child element inside first, second or third html element with CSS classes?

    How to target a specific browser of a specific device via CSS?

    How to vertically align data in the center of a table cell in HTML?

    How could I use postcss-bem with css-modules or postcss-js in React component

    How to create 2 separate SVG without blocking other div elements?

    How to use SVG fragment identifier for CSS background image on iOS?

    scrollbars not showing in google chrome

    How to use the not selector correctly in CSS [duplicate]

    how to remove content border in Modal Window