Image cannot be load by relative path using markdown syntax

[v-tawe]

Check List

Please check followings before submitting a new issue.

• I have already read Docs page & Troubleshooting page
• I have already searched existing issues and they are not help to me
• I examined error or warning messages and it's difficult to solve
• Using the latest version of Hexo (run hexo version to check)
• Node.js is higher than 8.6.0

Question

Environment & Settings

Node.js & npm version

12.16.2

Hexo and Plugin version(npm ls --depth 0)

[email protected] E:\Blog
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]

Your package.json package.json

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "build": "hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo deploy",
    "server": "hexo server"
  },
  "hexo": {
    "version": "5.0.0"
  },
  "dependencies": {
    "hexo": "^5.0.0",
    "hexo-all-minifier": "^0.5.3",
    "hexo-asset-image": "^1.0.0",
    "hexo-deployer-git": "^2.1.0",
    "hexo-generator-archive": "^1.0.0",
    "hexo-generator-category": "^1.0.0",
    "hexo-generator-index": "^1.0.0",
    "hexo-generator-tag": "^1.0.0",
    "hexo-renderer-ejs": "^1.0.0",
    "hexo-renderer-marked": "^3.0.0",
    "hexo-renderer-stylus": "^1.1.0",
    "hexo-server": "^1.0.0"
  }
}

Others

when using markdown syntax involved image ![Hello](hello.png), the render link is https://xxxx/.io//hello.png, so weird there contains a .io/ in the link.

Already enabled post_asset_folder: true and had put the images under correspond asset folder。

https://v-tawe.github.io/2020/07/31/fluid-guide-1/#%E6%96%87%E7%AB%A0%E5%86%85%E5%AE%B9%E5%9B%BE%E7%89%87

[curbengh]

I'm guessing the cause is hexo-asset-image; that plugin is not necessary, browser automatically interprets <img src="hello.png"> as <img src="/2020/07/31/others-fluid-guide/hello.png>.

[SukkaW]

@curbengh

For themes like NexT it not only shows contents at the post page about also at the index. Thus, the same <img> element will have different root.

[SukkaW]

@curbengh A solution is that we could modify the behavior of hexo-renderer-marked, utilizing url_for() for image element renderer, make sure every src of <img> will be resolved correctly.

But with url_for() it will then affect users that highly relied on relative path (e.g. Hosting a blog at IPFS)

[curbengh]

For themes like NexT it not only shows contents at the post page about also at the index.

I see, many themes also show post's excerpt at the index and excerpt might contain a image.

utilizing url_for() for image element renderer, make sure every src of <img> will be resolved correctly.

It's already utilised to prepend root. But I agree image renderer needs improvement to support post_asset_folder, but not through url_for() because I don't think it should cover post_asset_folder.

---

A possible way is to integrate asset_img.js into image renderer. Until then, when post_asset_folder is enabled, user should use

{% asset_img hello.png %}

instead of

![](hello.png)

https://hexo.io/docs/asset-folders#Tag-Plugins-For-Relative-Path-Referencing

[liolok]

https://liolok.github.io/How-to-Add-Image-to-Hexo-Blog-Post/

https://liolok.github.io/How-to-Add-Image-to-Hexo-Blog-Post/zh-Hans/

https://github.com/liolok/hexo-asset-link

Hexo still needs a plugin to get the relative links to assets work properly, what a pity.

[curbengh]

I managed to port asset_img tag plugin to hexo-renderer-marked, see hexojs/hexo-renderer-marked#159.

How to test:

1. $ npm install hexo-renderer-marked@curbengh/hexo-renderer-marked#post-asset

#_config.yml
post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

[liolok]

No, the tag plugin syntax was never what users want.

[liolok]

Sorry to say that, but wrong direction.

[SukkaW]

@liolok

Sorry to say that, but wrong direction.

If so, personally I will have to blame the theme, and start removing post_assets_folder feature (Hugo has no post_asset_folder as well). I am sorry to say, if you want markdown, then there will be only one version HTML being generated.

Stop asking serving different version of HTML at different pages. It just won't work. If you say Hexo shall be shame, we will take it. Looking forward to your PR then.

@curbengh I am thinking removing post_asset_folder feature completely, forcing user to manage their images in _source folder directly, no image resolving will be involved at our side. We could land it in Hexo 6.0.0.

[stevenjoezhang]

See also #3245 #3974 #1490

[liolok]

Hugo has no post_asset_folder but seems to do the work naturally without theme.

Okay I checked and the links in Hugo stay the same, so pictures in home page summary will not correctly rendered.

But at least the links that work in markdown source do the same in post page; in Hexo with post_asset_folder=true, they don't, which is weird to most users.

Introducing a tag plugin syntax didn't make all the users happy, in fact I saw pretty few people settled down with that, after all they came for markdown syntax.

However I advise that deprecate the post_asset_folder feature rather than complete removal, to avoid break the use case of "few people" above.

For new users Hexo does the same as Hugo about page resources, which is simply copy and paste them to /public, no strange non-markdown syntax, no confusing relative path converting. Let the plugins and themes do whatever they want.

[curbengh]

No, the tag plugin syntax was never what users want.

hexojs/hexo-renderer-marked#159 introduces an option to automatically prepends the post path to image path:

#_config.yml
post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

• postAsset - Resolve post asset's image path to relative path and prepend root valuewhen post_asset_folder is enabled.
  • "image.jpg" is located at "/2020/01/02/foo/image.jpg", which is a post asset of "/2020/01/02/foo/".
  • ![](image.jpg) becomes <img src="/2020/01/02/foo/image.jpg">
  • Requires prependRoot: to be enabled.

No tag plugin syntax required, ![](image.jpg) markdown syntax will be rendered to <img src="/2020/01/02/foo/image.jpg">. The option postAsset option is disabled by default for now, it may be enabled by default in future once deemed stable (along with prependRoot).

Please help test hexojs/hexo-renderer-marked#159, I tested in Ubuntu and non-WSL Windows 10.