cd ~{,/zhs/}

• Published: 2019-04-14
• Updated: 2019-04-16
• Markdown
• Simplified Chinese

Makrdown Syntax

Adding an image is supposed to be easy in markdown. Syntax is like: ![alt](path "title"), in which:

• alt is alternate text, provides alternative information for the image if user cannot view it for some reason like slow connection, wrong path or user is using screen reader;
• path is image file link, most important part;
• title is tooltip text (optional), appears when cursor is floating over the image.

In this article I will mainly talk about the image file path or link or whatever you name it. But if you want to make a quick choice in different solutions, follow the map below and jump to the section directly.

Image Hosting Sevice

An image hosting service allows individuals to upload images to an Internet website. The image host will then store the image onto its server, and show the individual different types of code to allow others to view that image. － Wikipedia

There are websites providing this type of sevice: You upload an image file, then get the link of it, or even its markdown code directly.

External URL

![An Imgur Image](https://i.imgur.com/ucHPX7L.gif "An Imgur GIF")

In addition, you could even find editors or plugins, that will do the uploading work and insert markdown code automatically after you drag&drop or paste the image.

If you need to save the traffic of your blog site, an image hosting service may be a nice choice. However if you’re already using a static site hosting service like GitHub Pages, and don’t have that many posts and images, there is no need to save traffic at all.

Post Asset Folder

First of all, this feature need to be enabled in Hexo site configuration file _config.yml:

post_asset_folder: true

Then the files in source/_posts should look like this:

2019-02-14-Test-Post.md
2019-02-14-Test-Post/
+-- Test-Image-1.webp
+-- Test-Image-2.webp
+-- Subdirectory/
|   +-- Test-Image-3.webp
|   +-- Test-Image-4.webp

You can see that post asset folder is besides the post source file, and has the same name with it.

Relative Link Based on Post Source File

First you need to install plugin hexo-asset-link:

$ npm i --save hexo-asset-link

Then in markdown source file source/_posts/2019-02-14-Test-Post.md, the base-relative links scheme would look like this:

![](2019-02-14-Test-Post/Test-Image-1.webp)
![](./2019-02-14-Test-Post/Test-Image-2.webp)
![](2019-02-14-Test-Post/Subdirectory/Test-Image-3.webp)
![](./2019-02-14-Test-Post/Subdirectory/Test-Image-4.webp)

Relative Link Based on Post Asset Folder

![](Test-Image-1.webp)
![](./Test-Image-2.webp)
![](Subdirectory/Test-Image-3.webp)
![](./Subdirectory/Test-Image-4.webp)

This type of base-relative link would only works on post page, not on home page excerption or editor preview.

Global Asset Folder

For images it could be source/images or source/img or something similar. For example I place my site favison at root folder:

Root-relative Link

Pay attention to the first slash ‘/’, without it the link would be a base-relative one.

![Site Favicon](/favicon.ico "My Site Favicon")

This type of root-relative link works in blog site, but basically not in editor preview.

Hexo Tag Plugin Syntax

Here is the official documentation about this solution, I don’t even want to write it down in my own blog. Here are top comments right below the docs: