Question

This works in iOS 6 and not iOS 5, so I’m assuming it’s a webkit thing.

I have an image in my www/images folder, so I use the following html:

<img src="images/img.gif" />

However the image appears as the blue square with a question mark (iOS’s image not found image).

How can I get this path to work on both iOS 5 and iOS 6?

Thanks.

Answer 1

I’ve noticed the same problem, the same code works fine in a local browser and in iOS6 onwards but doesn’t display an image in iOS4.3, 5.0 or 5.1.

The solution that worked for me was to use a background image instead and style it with CSS, it also means that you can provide a high-res retina image and scale it for non-retina devices too.

replace your IMG tag with:

<div id="myImage" />

In your CSS file :

#myImage
{
    background-image:url("../../assets/images/img.gif"); // The relative path from your CSS file to your image
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size:cover;
    width:100px;  // Actual image size is 200px x 200px
    height:100px;
}

The relative path to images from within a CSS file appears to work ok, but the path must be relative to the css file and not your html file.

If you want an image to display a 100px by 100px image on a non-retina device, you should create an image that is twice the size (200px x 200px) and let background:cover automatically change to the higher resolution when your app is running on a retina device.