md img render part improvement of hexo-render-marked

[ChanryLimmy]

Background

u know when we use other md editor write a post, the img with relative path is like this ![makabaka](postname/1.jpg), but here in hexo-render-marked i must use ![makabaka](1.jpg) if the config like this:

post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

it means there must be one side between md editor & hexo can't see the pic.

My solution

i opened node_modules -> hexo-render-marked -> lib -> render.js and change the image part (between the *** lines):

  // Prepend root to image path
  image(href, title, text) {
    const { hexo, options } = this;
    const { relative_link } = hexo.config;
    const { lazyload, prependRoot, postPath } = options;

    if (!/^(#|\/\/|http(s)?:)/.test(href) && !relative_link && prependRoot) {
      if (!href.startsWith('/') && !href.startsWith('\\') && postPath) {
        const PostAsset = hexo.model('PostAsset');
        // findById requires forward slash
        // ************************************************************
        const pp = require('path');
        const ppp = pp.join(postPath, '../');
        // const asset = PostAsset.findById(join(postPath, href.replace(/\\/g, '/')));
        const asset = PostAsset.findById(join(ppp, href.replace(/\\/g, '/')));
        // ************************************************************
        // asset.path is backward slash in Windows
        if (asset) href = asset.path.replace(/\\/g, '/');
      }
      href = url_for.call(hexo, href);
    }

    let out = `<img src="${encodeURL(href)}"`;
    if (text) out += ` alt="${text}"`;
    if (title) out += ` title="${title}"`;
    if (lazyload) out += ' loading="lazy"';

    out += '>';

    return out;
  }
}

it works. so the following is my suggests about this product experience

Feature Request

• provide a better implement cuz im not good at this language
• provide a config choice 4 this problem

tks a lot!

[github-actions]

This issue has been automatically marked as stale because lack of recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[SukkaW]

Unstale

[Kevincible]

Same request here

With the post_asset_folder option in hexo, it seems natural to store those images inside the post_asset_folder, and just use the relative path when writing, which offers a much better markdown preview experience

[Jack-InGitHub]

@ChanryLimmy code doesn't seem to work for me, I modified it a little, and the following code works fine for me. Others can refer to it.

"hexo-renderer-marked@^5.0.0",

    if (!/^(#|\/\/|http(s)?:)/.test(href) && !relative_link && prependRoot) {
      if (!href.startsWith('/') && !href.startsWith('\\') && postPath) {
        const PostAsset = hexo.model('PostAsset');
        // findById requires forward slash
        // ***************** Add the following code *******************
        const fixPostPath = join(postPath, '../');
        const asset = PostAsset.findById(join(fixPostPath, href.replace(/\\/g, '/')));
        // const asset = PostAsset.findById(join(postPath, href.replace(/\\/g, '/')));
        // ************************** End *****************************
        // asset.path is backward slash in Windows
        if (asset) href = asset.path.replace(/\\/g, '/');
      }
      href = url_for.call(hexo, href);
    }

[zhaomoran]

@SukkaW This issue has been put on hold for a long time, and #225 have not been closed yet. Is there any suggestion for us to end this problem?

[2-3-5-7]

I have written a plugin to solve this, hexo-relative-link

[lucienshawls]

I made a pr #271 and hopefully this solves the issue. More tests are welcome!

[stevenjoezhang]

See also hexojs/hexo#5505