Images not loading under ajax

[ramnathv]

Here is a quick way to reproduce the problem

1. Visit http://ramnathv.github.io/pycon2014-r
2. Click on Section 3.2

You will notice that images don't load on the page. Hitting refresh loads the images.

I suspect that since the page is being loaded using Ajax, it is not waiting till the images get loaded. It would be great if this could be fixed.

[SamyPesse]

Ok, I'll take a look at this issue, I think the problem come from the fact that we push the new state (so the update of the page url) after updating the html content: https://github.com/GitbookIO/gitbook/blob/master/theme/javascript/core/navigation.js#L43

So if you navigate from / to /visualize/ggplot2.html, the browser try to load /pycon2014-r/figure/uempmed1.png instead of pycon2014-r/visualize/figure/uempmed1.png.

[ramnathv]

Ah got it. Why does it load on refresh then? Is it because the state has now changed and so the image paths are detected correctly?

[SamyPesse]

Because on reload or when navigation between page on the same directory (so same level), the calcul of url is already done before or the calcul of url (from the image relative url) stays valid.

If I fixed it now, will you be able to pull gitbook and test it directly?

[ramnathv]

Yes. I should be able to do that. Thanks!

[SamyPesse]

Can you just give me the markdown content (on ly the section with the image) of this page, so than I can test.

[ramnathv]

Actually, I use img tags in my markdown, due to the bug in interpreting markdown based figure paths (which I believe is already logged as an issue here). Here is the relevant section from that page.

<p><img src="figure/layer1.png" title="plot of chunk layer1" 
  alt="plot of chunk layer1" style="display: block; margin: auto;" 
/></p>

[SamyPesse]

Fixed!

You should be able to use it with:

npm install git+https://github.com/GitbookIO/gitbook.git#ef4a8ea1b6c4dfb9a84b5c2a3c933f2d6481814e -g

I tested it locally and it works but let me know if there is any problem.

[SamyPesse]

I'll take a look at the image path problem.

[ramnathv]

Thanks. It works great. I created a minimal example based on your example repo. Here are my testing steps.

1. Go to http://ramnathv.github.io/example/
2. Click on Section 1.1

The image on that page is in a figure directory in chapter-1 and it is displayed correctly after I installed the fixed version of gitbook.

Thanks for making a really useful tool, and for being so responsive with bug fixes/feature requests. I am new to javascript, so will take a bit before I can contribute back to the project in a more meaningful way.

[SamyPesse]

You're welcome 😄

Feel free to do a pull-request on this file: https://github.com/GitbookIO/gitbook.io/blob/master/featured.json to add your books to gitbook.io.

[ramnathv]

I shall do that. Here is a minimal example to illustrate the markdown image issue. Let me know if you want me to file it separately.

1. Go to http://ramnathv.github.io/example/chapter-1/ARTICLE1.html
2. The image specified using markdown tags is not loaded. Issue is it's path is not interpreted correctly. Clicking on the image and using Copy Image URL, I get this

http://ramnathv.github.io/example/chapter-1/chapter-1/chapter-1/figure/cats-in-numbered-boxes.jpg

Clearly, the relative path is the problem.