安装hexo-asset-image导致Hexo插入图片无法显示的解决办法 Solution to insert pics in Hexo when hexo-asset-image is installed

请根据本文使用的Hexo版本自测本文时效性。
Please check the version of Hexo before reading.

1
2
3
4
$ hexo -v
INFO Validating config
hexo: 6.1.0
hexo-cli: 4.3.0

NO!

$ npm install hexo-asset-image –save

正确的做法

Hexo已经支持Markdown语法插入图片了!!
Hexo已经支持Markdown语法插入图片了!!
Hexo已经支持Markdown语法插入图片了!!
网上说hexo不能用Markdown相对引用图片的资料已经过时了!!
*IMPORTANT: Unlike the past, Hexo already supports Markdown syntax for inserting images!

以下摘自官方:
The following is the part of official document:

Embedding an image using markdown

hexo-renderer-marked 3.1.0 introduced a new option that allows you to embed an image in markdown without using asset_img tag plugin.

To enable:

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

Once enabled, an asset image will be automatically resolved to its corresponding post’s path. For example, “image.jpg” is located at “/2020/01/02/foo/image.jpg”, meaning it is an asset image of “/2020/01/02/foo/“ post, ![](image.jpg) will be rendered as <img src="/2020/01/02/foo/image.jpg">.

所以其实Hexo已经可以不使用繁杂的标签{% asset_img example.jpg This is an example image %}去插入图片了,可以直接使用Markdown语法并进行相对路径引用了,如![](image.jpg)
So actually we don’t need to use the nasty form {% asset_img example.jpg This is an example image %} to insert images. Feel free to use the Markdown way![](image.jpg).

错误的做法

一些网上的资料因为年代久远且被不断翻新会建议使用npm install hexo-asset-image –save命令安装hexo-asset-image进行图片插入。在新版本Hexo不要这样做,否则会导致最终的绝对路径出现bug导致图片无法引用。
如果已经执行了,请回退node_modules目录、package.json等文件到之前的版本,并使用hexo clean清除db.jsonpublic目录然后重新生成。

Some outdated tutorials may tell you that you have to use npm install hexo-asset-image –save to install hexo-asset-image for inserting images. DO NOT DO THAT NOW, cause it will make a bug in generated absolute paths. And the images will be not available in your blogs.
If you have already installed it, Please roll back the node_modules directory, package.json and other files to the previous version and use hexo clean to clear the db.json and public directory and then regenerate them.

安装hexo-asset-image导致Hexo插入图片无法显示的解决办法 Solution to insert pics in Hexo when hexo-asset-image is installed

https://smallsquare.github.io/Solution-to-insert-pics-in-Hexo/

Author

SmallSquare

Posted on

2022-03-23

Updated on

2023-03-17

Licensed under

Comments