This is the 12th day of my participation in the August Challenge

This article describes the various ways Hexo can add images when editing articles.

Absolute path local reference

When only a small number of images are used in a Hexo project, they can be consolidated in the Source/Images folder and accessed via markdown syntax.

! [](/images/image.jpg)Copy the code

The images loaded by this method can be accessed either in the homepage content or in the body of the article.

Relative path local reference

In addition to the unified images folder, images can be placed in the article’s own directory. The directories for articles can be automatically generated by setting the post_asset_Folder: true to the site configuration file.

After setting the post_asset_folder configuration item in the _config.yml file to true, run $hexo new post_name to generate the post post_name. Md and folder post_name of the same name in source/_posts. By placing the image resource in post_name, the article can reference the image resource using a relative path.

! [](image.jpg)Copy the code

Tag plug-in syntax reference

This relative path image display method is fine on the blog details page, but on the home page preview page the image will not be displayed. If you want the image to appear in both the article and the front page, you can use the tag plugin syntax.

{% asset_img image.jpg This is an image %} Limit image display size {% img http://www.viemu.com/vi-vim-cheat-sheet.gif 200 400 vi-vim-cheat-sheet %}Copy the code

HTML syntax reference

<img SRC =" spellcheck. PNG "width="50%" height="50%" title=" Grammarly." Alt =" Grammarly."/>Copy the code

Will directly! [](image.jpg) replace the syntax above.

Enable FancyBox: Click to view a larger image

I’m using Hexo’s NexT theme, which provides a convenient interface to FancyBox.

Usage:github.com/theme-next/… Markdown usage:

{% img http://www.viemu.com/vi-vim-cheat-sheet.gif 600 600 "vi/vim-cheat-sheet" %}Copy the code