Xcode 5 and images in a local HTML file

Question

With Xcode 4 I was able to load images from the main bundle in a local html file that was being loaded into a UIWebView, these images were just in a folder called Resources/images. Now with xcassets that doesn't seem to be the case.

You used to be able to have this in the header of an HTML file:

.ccp-arrow {width:100%;height:32px;background:url('ccp-arrow.png') no-repeat center;padding-top:10px;padding-bottom:10px;}

And call:

<div class="ccp-arrow"></div>

And have it show up in the document.

It seems using xcassets to manage the images this no longer works.

I have tried removing the png extension with no luck.

The Only thing I can think of is to re-create that old images folder in the last version, and put just the images I am using in my UIWebViews in there, but I am trying to avoid that.

Any ideas?

Answer 1

Yes, it looks like you'll have to resort to the method you already described: Having the images you would like to use in your HTML file embedded the old fashioned way in Xcode, not via the asset catalog.

Another way I'm using regularly is, to embed the images as base64 encoded data directly in the HTML or CSS. The good thing about this method is, that you don't have to pass the directory or file path into the HTML/CSS. This is what it would look like in CSS:

#myContainer {
  background: url(data:image/png;base64,iVBoAAAAORw0KGgUgAd2FyZQBBZG...);
}

Or in HTML:

<img src="data:image/png;base64,iVBoAAAAORw0KGgUgAd2FyZQBBZG...">

You can get to the base64 data of your image by using the command line function base64:

$ base64 my-image.png