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

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)

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)