preface

I recently started using Hexo again, but found that local images were not always displayed when referenced in articles. Whatever official documents are given

{% asset_img example.jpg This is an example image %}
Copy the code

Again using the code given by the Volantis subject documentation

{% img [class names] /path/to/image [width] [height] '"title text" "alt text"' %}
Copy the code

It also didn’t work and took a long time to fix. Therefore, I will sort out some of the solution experience, hoping to help you.

Solving steps

  1. Open the _config.yml file and modify the following content so that when we create a new article, we will automatically create a folder with the same name as the article to store the image files from
post_asset_folder: true
Copy the code
  1. We need to install an image path conversion plugin named Hexo-asset-Image
npm install hexo-asset-image --save
Copy the code

The problem with images not being displayed is in the plug-in code

  1. Open /node_modules/hexo-asset-image/index.js and replace the contents with the following code
'use strict';
var cheerio = require('cheerio');

// http://stackoverflow.com/questions/14480345/how-to-get-the-nth-occurrence-in-a-string
function getPosition(str, m, i) {
  return str.split(m, i).join(m).length;
}

var version = String(hexo.version).split('. ');
hexo.extend.filter.register('after_post_render'.function(data){
  var config = hexo.config;
  if(config.post_asset_folder){
    	var link = data.permalink;
	if(version.length > 0 && Number(version[0= =])3)
	   var beginPos = getPosition(link, '/'.1) + 1;
	else
	   var beginPos = getPosition(link, '/'.3) + 1;
	// In hexo 3.1.1, the permalink of "about" page is like "... /about/index.html".
	var endPos = link.lastIndexOf('/') + 1;
    link = link.substring(beginPos, endPos);

    var toprocess = ['excerpt'.'more'.'content'];
    for(var i = 0; i < toprocess.length; i++){
      var key = toprocess[i];
 
      var $ = cheerio.load(data[key], {
        ignoreWhitespace: false.xmlMode: false.lowerCaseTags: false.decodeEntities: false
      });

      $('img').each(function(){
		if ($(this).attr('src')) {// For windows style path, we replace '\' to '/'.
			var src = $(this).attr('src').replace('\ \'.'/');
			if(!/http[s]*.*|\/\/.*/.test(src) &&
			   !/^\s*\//.test(src)) {
			  // For "about" page, the first part of "src" can't be removed.
			  // In addition, to support multi-level local directory.
			  var linkArray = link.split('/').filter(function(elem){
				returnelem ! =' ';
			  });
			  var srcArray = src.split('/').filter(function(elem){
				returnelem ! =' '&& elem ! ='. ';
			  });
			  if(srcArray.length > 1)
				srcArray.shift();
			  src = srcArray.join('/');
			  $(this).attr('src', config.root + link + src);
			  console.info&&console.info("update link as:-->"+config.root + link + src); }}else{
			console.info&&console.info("no src attr, skipped...");
			console.info&&console.info($(this)); }}); data[key] = $.html(); }}});Copy the code

After that, use markdown syntax to insert the image and everything is fine.