CODEWITHSUNDEEP
androidhtmlcsscordova
lowerkey
lowerkey

Reputation: 8335

images and css not showing up in apache cordova

I'm developing an android app using cordova. The index.html has the following: 

<!DOCTYPE html>
<html>
  <head>
    <title>Mobile</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <link type="text/css" rel="stylesheet" media="all" href="/style.css">
    ...

My problems concerns the link tag. Although logcat output shows the embedhttp server serving up the style.css, the styles don't get applied to the html.

In contrast, the js files I include, seem to be working perfectly fine. 

<body>
  <script type="text/javascript" src="/cordova.js"></script>
  <script type="text/javascript" src="/lib/jquery-2.1.0.min.js"></script>
  ...

Has anyone else run into this issue?

Upvotes: 0

Views: 1565

Answers (2)

Csongor
Csongor

Reputation: 61

What you have to be aware of is that cordova counts relative paths differently than your normal browser. So I would recommend not using relative paths for images but use the absolute path from the project "home". Ex:

body {
    background: url('images/image1.png');
}

This worked for me as I needed to keep a functioning version for a webapp as well as for a cordova nativified app.

Upvotes: 1

Filipe
Filipe

Reputation: 21

I was experiencing the same problem and I solved writing the path to the images relative to css file location and not relative to .HTML file location.

I have the following structure:

css
  index.css
images
  mage1.png
index.html

My css class, declared inside índex.css file, must be like this one:

body {
   background: url('../images/image1.png');
}

Upvotes: 2

Related Questions