Insert Images to Your Blog


Notice:

This article is only apply to those who store images locally.

Principle of inserting images in hexo

Firstly, you should turn on post_asset_folder and Hexo will generate a folder with the same name as each article, then Hexo will link the images in the folder to the corresponding article. For example, you create an article called lbwnb.md and Hexo will create a folder called lbwnb automatically. Then you put 17killandeatchicken.jpg in the folder and write !(p1)[17killsandeatchicken.jpg] in lbwnb.md, Hexo will just show the image in your blog instead of this line of code.
However, it’s inconvenient for us to do these steps, you should put the images in the folder, copy the name of the image and write the code like !(p1)[17killsandeatchicken.jpg]. Here I will show you 2 ways to insert images.

Insert images via Typora (recommend)

It’s quite simple in Typora to do that.
You just need to open the image setting and set copy image to custom folder to /$(filename)$, then when you paste images to your articles, it will automatically store it in the corresponding folder.

image 1

Insert images via VSCode (not recommend)

However, it’s difficult to insert images in VSCode.

First, you should open the whole folder in VSCode.

image 2
Then, because of VSCode plugins don’t support set variables in storage path (default path is /images ), so you have to move the images in /images to the corresponding folder.

image 3

Finally, delete /images in the reference path, such as replacing ![iamge 13](images/2022_09_22_04_17_08.png) with ![iamge 13](2022_09_22_04_17_08.png)


评论
  TOC