How to render HTML images from jupyter notebook?

kushalj · February 27, 2020, 8:48pm

While the tag works perfectly locally in jupyter, my build is failing after pushing my code. The error it shows is a jekyll build error,

The html code in my notebook is,
<img src="./my_icons/fastai_logo.png" width="800" height="600"/>
Can someone explain in detail how can I fix this?
Thanks

hamelsmu · February 27, 2020, 8:56pm

Can you provide a link to your notebook? Do you need to embed HTML in your notebook, can you use markdown? ![]("https://yourimage.com")

or

![](my_icons/fastai_logo.png)

kushalj · February 27, 2020, 8:59pm

Link to my notebook: https://github.com/kushalj001/black-box-ml/blob/master/_notebooks/2020-01-10-Building-Sequential-Models-In-PyTorch.ipynb
I need to resize my images. I am not able to do that locally using markdown.
I tried this syntax but did not work
[](my_icons/fastai_logo.png =600x800)

hamelsmu · February 27, 2020, 9:19pm

Ok there is no immediate fix, this being converted to a liquid tag by nbdev, so unfortunately you are limited to markdown. As a temporary measure, I suggest changing the size of the logo on your computer instead

kushalj · February 27, 2020, 9:20pm

Alright.
Thanks a lot for the quick reply.

jeremy · February 27, 2020, 9:25pm

What’s the issue there? Is it just that we’re missing the html in _includes for that?

hamelsmu · February 27, 2020, 9:36pm

@jeremy the problem is I’m hijacking settings.ini to make sure images get the right url:

doc_path = images/copied_from_nb
doc_host = https://nbdev.fast.ai
doc_baseurl = {{site.baseurl}}/images/copied_from_nb/

so naturally, when the jupyter is converted to html, that url is converted to this:

<p>{% include image.html height="600" max-width="800" file="{{site.baseurl}}/images/copied_from_nb/./my_icons/fastai_logo.png" %}</p>

Which is invalid liquid. to fix this I suppose I could:

Monkey patch nbdev to allow me to inject the baseurl outside settings.ini
Monkey patch the function that wraps the includes
Perhaps something else?

I generally try to avoid monkey patching, if possible because it feels dangerous for long term stability so not sure. But I’m also hesitant to try to force nbdev to change to this use case which seems pretty specific? Please let me know your thoughts

EDIT: made some corrections to some typos in my answer just now. Please re-read if haven’t already.

hamelsmu · February 27, 2020, 9:45pm

Just to clarify, yes we are missing an image.html in _includes but that is not the real problem (I can grab that template from nbdev), in this case, because of the issue I mentioned above with the baseurl.

jeremy · February 27, 2020, 10:43pm

Why is it using {{site.baseurl}} here, rather than a ConfigParser template string? The idea with nbdev is to have everything in settings.ini, so then any template stuff is handled automatically.

hamelsmu · February 27, 2020, 10:59pm

This is my first time dealing with ConfigParser, so I am pretty ignorant as to what that means. I will try to read up on that. If you have any pointers to help get me started looking at the right approach please let me know! Thanks

sgugger · February 27, 2020, 11:13pm

Look at the base settings.ini in nbdev_template for examples.

hamelsmu · February 27, 2020, 11:17pm

Thanks will take a look later today!

hamelsmu · February 28, 2020, 1:13am

@jeremy @sgugger

Ok I think I believe I understand what the ConfigParser template string is. The problem I’m trying to solve is I need to pass a variable from _config.yml to settings.ini, which I was doing in a hacky way by injecting liquid into that setting.

The problem is I need the doc_baseurl to be prepended with the baseurl from the Jekyll config file. Not clear to me what the best way to achieve this is? If I did it with Actions, it would result in a broken build because it would have to be committed into the repository before I could trigger a change to settings.ini.

Maybe I’m not thinking of something obvious. Please let me know your thoughts.

EDIT: I guess the workaround is the user must change both settings.ini as well as _config.yml if they use a custom domain? That seems like the only way out to me. This is what I will move forward with for now.

hamelsmu · February 28, 2020, 2:50am

I have addressed this per the above comments in https://github.com/fastai/fastpages/pull/139

kushalj · February 28, 2020, 8:21am

Thanks a lot for the swift actions. I uploaded my blog from the new repo. Although it passes the build, the images do not show up on my website.

hamelsmu · February 28, 2020, 8:38am

You have to create a new repo from the newest template and copy your posts over. I know this is painful, (I’m working on a slightly easier path to upgrade in the near future

EDIT: I see that you are using the newest template. I had to change another thing for this to work in the last 15 minutes or so because this was a breaking change (so I had to freeze the version). I made a PR for you so you don’t have to copy everything https://github.com/kushalj001/black-box-ml/pull/2

Hopefully it works now?

kushalj · February 28, 2020, 8:42am

I did that. From the newest template which has image.html in _includes. The images won’t render yet. And my markdown also breaks at some places. Trying to figure it out. Link https://kushalj001.github.io/black-box-ml/lstm/pytorch/gates/vanishing%20gradient/2019/12/28/Understanding-LSTMs.html

kushalj · February 28, 2020, 8:42am

Will do this right away.

kushalj · February 28, 2020, 9:19am

The HTML images are not rendering in my blog post @hamelsmu. https://kushalj001.github.io/black-box-ml/lstm/pytorch/gates/vanishing%20gradient/2019/12/28/Understanding-LSTMs.html

The markdown below image also gets affected due to that I guess.

hamelsmu · February 28, 2020, 9:19am

I’m forking your repo and investigating now