Images in epub files are not showing in iPhone or iPad / iBooks

[villevainio]

Images aren't showing in epub files when viewing with iPhone 5s (running 7.1.2) or iPad 2 (running 8.1.3) using the iBooks reader. The images are empty with only a grey border and the alt text showing. The images work normally when using the Kobo viewer with both of these devices and somehow also with the iBooks reader on my MacBook Pro (running Mac OS X 10.10.1).

[villevainio]

When validating the epub using idpf's validator I get this error message (for each image) that might be related to this problem:

'http://villevainio.com/iltasatu/wp-content/uploads/2015/02/01-018-140x300.jpg': remote resource reference not allowed; resource must be placed in the OCF

[soderlind]

Is http://villevainio.com/ same site that you're hosting Read Offline on ?

[villevainio]

Yes it is, I have Wordpress setup in the sub folder http://villevainio.com/iltasatu

[soderlind]

ok, I know now (in teori) how to fix this, just have to implemet it :)

[villevainio]

Sounds promising, I will be waiting :)

[soderlind]

Fixed in https://github.com/soderlind/read-offline/commit/dd1f9e58959b050ffb8411963a5ed7a1ab70bf7b

[soderlind]

.. now off to bed

[villevainio]

Thanks for the effort in trying to fix this issue. I'm still having problems with the images. Now iPhone/iBooks is unable to open this post as an epub http://villevainio.com/iltasatu/?p=9. On iPhone/Kobo and MacBook Pro/iBooks the first image isn't shown but the second one is.

Also with this second post the first and only image isn't shown (the featured cover image is working great) http://villevainio.com/iltasatu/?p=21. When trying to validate this error is thrown:

image file OEBPS/1b1-5-comfortorTH.jpg is missing

[soderlind]

Please switch to a permalink structure, like /%postname%/ and see if that helps.

Btw, this what I (have to) do:

1. Search content for image url
2. Replace url with a relative url (minus first slash), can be just the filename
3. Find image file path
4. Create unique id pr image
5. Attach (import into) image to the epub doc

If one of these fails ... (I'll add better tests later)

[villevainio]

Switching to a permalink structure didn't seem to have any effect. I'm sorry I'm not exactly sure how I should do steps 4-5. Ideally I would like to use Read Offline for a (even) less tech savvy client than me so it would be great if the images would work straight out of the box without any manual steps.

[soderlind]

You don't have to do anythig, was me showing you what I'm doing. I'll have a look .. might have to wait until tomorrow

[villevainio]

Ok, cool :) Thanks again for looking into this.

[soderlind]

Please test the latest commit https://github.com/soderlind/read-offline/commit/b42961d92b368f8f2239367807d0c780989bff10

Note, I haven't updated the plugin version number

[villevainio]

There is some improvement. I added a few images to this post http://villevainio.com/iltasatu/the-adventures-of-tom-sawyer/ for testing purposes. Now on iPhone/iBooks, the first image is shown but the other three are not. On iPhone/Kobo all the images are shown. For the three images that are not shown on iBooks, the idpf validator throws this error:

'http://villevainio.com/iltasatu/wp-content/uploads/2015/02/01-023.jpg': remote resource reference not allowed; resource must be placed in the OCF

[soderlind]

Please test the latest commit https://github.com/soderlind/read-offline/commit/3cd0d5860e8f60c3080722ae6a7a94921ba6751e

I haven't updated the plugin version number

[villevainio]

Now the images work like a charm with all of my device/reader combos. Also the epub now validates. Thank you!

[soderlind]

Goodie :) bumped version number to 0.2.8 in latest commit