Search code examples
htmlemacsorg-mode

How to integrate an image (set via local path) in the exported HTML in emacs?


I would like to export an HTML file that contains some images (added via local path) to appear outside my computer. How can I integrate/embed/burn the image in the file for public view?

I can successfully manage to do this on R Markdown but unable to pull it off on emacs as I have only started using it.

Here's what I typed:

#+CAPTION: I-V curve for a diode
#+NAME:   fig:diode_1
#+attr_html: :width 250px
[[C:\Users\Documents\thres.png]]

I am hoping to get the local image exported into the final HTML document permanently.


Solution

  • Copy this code into the *scratch* buffer and C-M-x it. Then export the .org file to html as usual.

    (defun org-html--format-image (source attributes info)
      (format "<img src=\"data:image/%s;base64,%s\"%s />"
          (or (file-name-extension source) "")
          (base64-encode-string
           (with-temp-buffer
         (insert-file-contents-literally source)
         (buffer-string)))
          (file-name-nondirectory source)))
    

    It puts the images directly into the html file thanks to base64 encoding.