hexo-compatible-image

Copyright © Tony's Studio 2025

A Hexo plugin to make image links compatible with both Hexo and Markdown editors.

Installation

npm install hexo-compatible-image --save

This plugin works only if you have post_asset_folder: true set in your _config.yml.

The Problem

If you store images alongside your markdown files in the source/_posts directory, you will probably turn on post_asset_folder: true. Then Hexo will create a folder for each post to hold its images.

_posts/
    post.md
    post/
        image1.png

However, when Hexo generates the site, it will put the images beside the post HTML files in the output directory, resulting in inconsistent relative paths.

public/
    post/
        post.html
        image1.png

To make images display correctly, you need to use ./image1.png in your markdown files. But in this way, you won't be able to preview the post in your markdown editor.

The Solution

There are some plugins that claim to solve the problem, but I found that they just don't work for me. So I wrote this simple plugin.