README.md: Fix broken image on GitBook

[neelanshsahai]

Add a link of the image to the Readme so that the Image renders correctly on both, the README and the GitBook
Fixes #398

For short term contributors: we understand that getting your commits well
defined like we require is a hard task and takes some learning. If you
look to help without wanting to contribute long term there's no need
for you to learn this. Just drop us a message and we'll take care of brushing
up your stuff for merge!

Checklist

• I read the commit guidelines and I've followed
  them.
• I ran coala over my code locally. (All commits have to pass
  individually. It is not sufficient to have "fixup commits" on your PR,
  our bot will still report the issues for the previous commit.) You will
  likely receive a lot of bot comments and build failures if coala does not
  pass on every single commit!

After you submit your pull request, DO NOT click the 'Update Branch' button.
When asked for a rebase, consult coala.io/rebase
instead.

Please consider helping us by reviewing other peoples pull requests as well:

• pick up any PR at https://coala.io/review
• review it (check https://coala.io/reviewing for more info)
• if you are sure that it needs work, use cobot mark wip <URL> to get it out
  of the review queue.

The more you review, the more your score will grow at coala.io and we will
review your PRs faster!

[jayvdb]

Please fix your commit message

[neelanshsahai]

Done !!! 👍

[prashant0598]

ack 5c41e86

[prashant0598]

LGTM 👍

[prashant0598]

ack 55f495d

[jayvdb]

@neelanshsahai , did you try #398 (comment) ?

An absolute URL is not a very good solution.

[jayvdb]

unack 55f495d

[jayvdb]

Also, in your commit message, it should be GitBook, not gitbook .
Please pay attention to details like that.

[neelanshsahai]

okay
will do that right away 👍

[prnvdixit]

@neelanshsahai A couple of issues :-

1. You can omit "Fixes" from the commit description - Use something like "This ensures that the image is rendered correctly on README and Gitbook projects page." Also, use "Closes" instead of "Fixes" in issue reference.
2. I think this still has some problem. IMO this shouldn't happen as we have used relative path to image, which is same in your fork too - Does this makes sense?

[neelanshsahai]

@prnvdixit Done 👍
@jayvdb I tried center aligning the images using the markdown syntax, but had no luck. Hope it gets rendered on the GitBook correctly.
Also please tell me why is the gem installation failing? (in the deploy preview)

[mamat-rahmat]

Image is still broken. And this will make image not centered in both github readme and gitbook html result.

Take a look at the deploy that i create from your commit here. (You can also create you own gitbook for testing changes by registering to gitbook and linking the forked repo)

The problem source of the broken image is, in the book.json (gitbook config), root is set to data/locale/. And while the readme and other stuff are symlinked, the screenshot folder isn't.

[mamat-rahmat]

I doubt we can make image in gitbook readme (About) centered. Seems like the sanitization filter used is strict.

But, for github readme and gitbook html (Introduction), current workaround is enough.

@jayvdb

[jayvdb]

@mamat-rahmat , we could add a symlink to the screenshot folder, if that would fix it.

@neelanshsahai , you want to try it (create your own custom gitbook with your fork of this repo)

[riouwa]

try add {: .center} to align the image

![image](./screenshots/header.png){: .center}