Add an image to markdown file (Github and local computer) and solve the problem that the image can't be displayed in the md file preview

1. Github[^1]

Chinese version: Zhihu

1. Github[1]

1.1. Locate in the same folder

If the image is at the same folder with the md file, for example, "username/example.md" and "username/1.png", then you should just input:

![](1.png)


1.2. Locate in different places

If the image locates in "username/docs/assets/1.png" and the md file locates in "username/docs/example.md"then you should input :

![](/docs/assets/1.png)


1.3. URL

If the url of the image is "https://example/1.jpg", then you should input:

![](https://example/1.jpg)


2. Local computer

Markdown editor: VS Code

Extention: Markdown Preview Enhanced by Yiyi Wang


2.1. Locate in the same folder

If the image is at the same folder with the md file, for example, "C:\Users\X\Desktop\example.md" and "C:\Users\X\Desktop\1.png", then you should just input:

![](1.png)


2.2. Md file locates in one folder and the image locates in its subfolder

If the image is at a subfolder under the folder where the md file locates, for example, md file locates at "C:\Users\X\Desktop\example.md" and the image locates "C:\Users\X\Desktop\NoExample\1.jpg", then you should input:

![](NoExample/1.jpg)

Note that there can't be spaces in the name of the folder. If there are spaces, replace them with %20. (You can check this when the other codes in this article don't work.)


2.3. URL

It's same as 1.3.


2.4. Absolute file path

If the file path of the image is "C:\Users\X\Desktop\1.png", then input:

![](C:/Users\X\Desktop\1.png)

Note to change the first "\" to "/" so that the image can be shown normally.


2.5. Base64 string[2]

Convert the image to base64 string in below websites:

Image to Base64 converter

Image to Base64 converter to convert Image to Base64 String

then you should input:

![](data:image/png;base64,...(the base64 string))

or you can input:

![][tmp]

at the place where you want to insert image and input:

[tmp]: data:image/png;base64,... (the base64 string)

at the end of the article to place the base64 string at the end of the article. (png as an example)

Note it is [tmp] rather than (tmp), [] and not (), and you should input "data:image/png;base64," before your plain base64 string. No space between them.

If it you still can't see the image in preview, save your md file to local then have a try again. (You can try this when the other codes in 2. don't work.)

This method will embed the image into the md file, so the file will be bigger.


Reference

  1. GitHub Markdown: Add an Image to README.md File ↩︎

  2. 将图片内嵌入Markdown文档中 ↩︎

Comments

Post a Comment

Popular posts from this blog

Do math typesetting in one markdown file using KaTeX

Contents [ hide ] 1. Accents Chinese version: Zhihu Use Vs Code and extension Markdown Preview Enhanced (by Yiyi Wang) you can preview math typesetting in markdown file using KaTeX, see Math . By the way, I use Markdown All in One (by Yu Zhang) to creat table of contents and export markdown to html, Markdown Footnote (by Mai Hou) to automatically add footnotes and markdown-index (by legendmohe) to automatically add serial numbers on titles. Here I introduce some basic fomulas most used in Calculus, for more information, see KaTeX . The contents in every section are: code, preview. 1. Accents 1.1. Prime $ f'(x) $ f ′ ( x ) f'(x) f ′ ( x ) 1.2. Vector $ \vec {a} $ a ⃗ \vec {a} a $ \overrightarrow {PP_0} $ P P 0 → \overrightarrow {PP_0} P P 0 ​ ​ 1.3. Hat $ \hat{\theta} $ θ ^ \hat{\theta} θ ^ $ \widehat{ac} $ a c ^ \widehat{ac} a c 2....
Read more

Zhihu Scraper: Scraping the text content in Zhihu's public collection folder (Videos and pictures are saved in the form of links)

Image
Contents [ hide ] Notice: From 2022.08.31, This project is out of maintenance  The source code is on Github: ZhihuScraper   License This project uses the GPLv3 license. Explanation of This Project This project is written in Python 3.10+, runs on Windows by default, and uses the Edge browser. For other systems and browsers, see the later "Instructions for use". This project crawls the content in Zhihu's public collection folder and saves it as an html file, including answers, articles, pins, and videos. The save location defaults to C:\__assets__\the name of the collection folder, the name of the file is Author: Title and for the pin it uses its first 13 characters as the title. Pictures and videos are saved in the form of links and need to be connected to the Internet to view, so the content saved locally is actually only text. The reason for crawling public collection folder is that private collection folder need to be logged in to Zhihu before they can be acce...
Read more

FFmpeg: Solve the problem that the video file can't be played due to the lack of codec, get the parameters required by the delogo command of removing the watermark, and some other commonly used commands

Image
Contents [ hide ] 1. Merge and convert m4s files (bilibili default download format) to mp4:[^1][^2][^3] P.S. There is a chinese version of this article: Zhihu The first two contents in the headline are in 1. and 4.1. Be careful to modify the command parameters according to your needs. 1. Merge and convert m4s files (bilibili default download format) to mp4: [1] [2] [3] Open file location, rename the two m4s files as 1.m4s and 2.m4s then press shift and right click mouse at the blank location of the files, select open power shell window here, then input: ffmpeg -i 1.m4s -i 2.m4s -c copy output.mp4 (If the output video can't be played on the computer, use the command below) or ffmpeg -i 1.m4s -i 2.m4s -threads 2 -preset veryfast -crf 20 output.mp4 ...
Read more