Hard Code Markdown Images

Question

I am just making a general markdown page to share a design guide with everyone on the project. I would like to know how I can hard code the images I use into the .md file. I do not want to have to share a folder full of images each time I want to give someone the .md file.

What would be the best way to hard code/build the markdown project into one single file?

One idea is to convert all the images into base64, but of course that is not a very pretty solution. Another idea is to host the images somewhere but then they would need internet access and the images would possibly be public, so that is not a solution either.

My current code:

![placehoder text](images/the-image.jpg)

Where I have an images folder next to the .md and the "the-image.jpg" inside that folder

Pistoia

Answer 1

You should write the document in markdown and then convert it to PDF using a tool like pandoc

However your base64 solution would work. See this

![Hello World](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAUCAAAAAAVAxSkAAABrUlEQVQ4y+3TPUvDQBgH8OdDOGa+oUMgk2MpdHIIgpSUiqC0OKirgxYX8QVFRQRpBRF8KShqLbgIYkUEteCgFVuqUEVxEIkvJFhae3m8S2KbSkcFBw9yHP88+eXucgH8kQZ/jSm4VDaIy9RKCpKac9NKgU4uEJNwhHhK3qvPBVO8rxRWmFXPF+NSM1KVMbwriAMwhDgVcrxeMZm85GR0PhvGJAAmyozJsbsxgNEir4iEjIK0SYqGd8sOR3rJAGN2BCEkOxhxMhpd8Mk0CXtZacxi1hr20mI/rzgnxayoidevcGuHXTC/q6QuYSMt1jC+gBIiMg12v2vb5NlklChiWnhmFZpwvxDGzuUzV8kOg+N8UUvNBp64vy9q3UN7gDXhwWLY2nMC3zRDibfsY7wjEkY79CdMZhrxSqqzxf4ZRPXwzWJirMicDa5KwiPeARygHXKNMQHEy3rMopDR20XNZGbJzUtrwDC/KshlLDWyqdmhxZzCsdYmf2fWZPoxCEDyfIvdtNQH0PRkH6Q51g8rFO3Qzxh2LbItcDCOpmuOsV7ntNaERe3v/lP/zO8yn4N+yNPrekmPAAAAAElFTkSuQmCC)

Politics

FYI: This doesn't work on GitHub nor GitLab. This does work on VSCode's built-in Markdown preview. – Overarm

it does work in vscode at the moment – Garboard

Does work for Metabase Text-box – Mullis

Answer 2

this is my first post to stack overflow so please be kind :)

a little piece of python i used to do this one for me... copy and paste the entire output file directly into the markdown document... worked for me...

# function to create embedded image string as base64:

    def image_to_base64(image_file, output_file):

      # need base 64
      import base64,sys
      # open the image
      image = open(image_file, 'rb') 
      # read it
      image_read = image.read() 
      # encode it as base 64
      # after python>=3.9, use `encodebytes` instead of `encodestring`  
      image_64_encode = base64.encodestring(image_read) if sys.version_info <(3,9) else base64.encodebytes(image_read)
      # convert the image base 64 to a string
      image_string = str(image_64_encode)
      # replace the newline characters
      image_string = image_string.replace("\\n", "")
      # replace the initial binary
      image_string = image_string.replace("b'", "")
      # replace the final question mark
      image_string = image_string.replace("'", "")
      # add the image tags
      image_string = '<p><img src="data:image/png;base64,' + image_string + '"></p>'
      # write it out
      image_result = open(output_file, 'w')
      image_result.write(image_string)

Guanine

Thanks for your contribution, very helpful! – Qktp

Answer 3

Knowing this is an old thread, but for future reference sake, this method does not work with Notion when importing Text/Markdown.

Yeasty