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

Solution 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)

Solution 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
# open the image
image = open(image_file, 'rb') 
# read it
image_read = image.read() 
# encode it as base 64
image_64_encode = base64.encodestring(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)

Comments

[ynn]

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