title: Embedding image in ipython notebook for distribution
body: <p>I have an ipython notebook with an embedded image from my local drive. I was expecting it to be embedded in the JSON along with the output of code cells, but when I distributed the notebook, the image did not appear to users. What is the recommended way (or ways) to embed an image in a Notebook, so that it doesn't disappear if users rerun code cells, clear cell output, etc.?</p>
  <p>The notebook system caches images included with <code>![label](image.png)</code>, but they last only until the python &quot;kernel&quot; serving the notebook is restarted. If I rename the image file on disk, I can close and reopen the notebook and it still shows the image; but it disappears when I restart the kernel.</p>
  <p><strong>Edit:</strong> If I generate an image as code cell <em>output</em> and then export the notebook to html, the image is embedded in the html as encoded data. Surely there must be a way to hook into this functionality and load the output into a markdown (or better yet &quot;raw nbconvert&quot;) cell?</p>
  <pre><code>from IPython.display import Image 
  Image(filename='imagename.png')
  </code></pre>
  <p>will be exported (with <code>ipython nbconvert</code>) to html that contains the following:</p>
  <pre><code>&lt;div class=&quot;output_png output_subarea output_execute_result&quot;&gt;
  &lt;img src=&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAnAAAAFgCAYAAAA...
  &lt;/div&gt;
  </code></pre>
  <p>However, even when I manually embedded <em>this</em> snippet into a markdown cell, I couldn't get the image to display. What am I doing wrong?</p>
  <h3>Update (2020)</h3>
  <p>Apparently, the problem has (finally!) been addressed in the newer notebook / Jupyter versions: as of <a href="https://stackoverflow.com/a/53723360/8508004">2018</a> (thanks for the link @Wayne), the html sanitizer will accept an embedded html image, as in <code>&lt;img src=&quot;data:image/png;base64,iV...&gt;</code> . Markdown image syntax also accepts images as embedded data, so there are <em>two</em> ways to do this. Details in these helpful answers:</p>
  <ul>
  <li><a href="https://stackoverflow.com/a/65226583">markdown image syntax</a> (answer by @id01)</li>
  <li><a href="https://stackoverflow.com/a/32894394">html element syntax</a> (in answer by @tel -- note that it works now!)</li>
  </ul>