hexo引用本地图片无法显示
最近重新开始用起hexo,但是发现在文章中引用本地图片时总是显示不出来。
问题如下图所示。
花费了许久时间才解决这个问题。
因此将一些解决经验整理出来,希望能帮助到大家。
一、插件安装与配置
首先我们需要安装一个图片路径转换的插件,这个插件名字是hexo-asset-image
npm install https://github.com/CodeFalling/hexo-asset-image --save
但是这个插件的内容需要修改【不然可能会出Bug】
打开/node_modules/hexo-asset-image/index.js,将内容更换为下面的代码
'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;elsevar 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){return elem != '';});var srcArray = src.split('/').filter(function(elem){return elem != '' && 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();}}
});
打开_config.yml文件,修改下述内容
post_asset_folder: true
二、问题推测
(一)本地图片没有有效上传至github仓库中,导致引用无效
解决方案:安装插件(回看前文)
(二)本地图片没有存放在同名文件夹中
解决方案:将需要引用的本地图片存放在与文章名相同的文件夹中
(三)图片路径出错
这也是我出现的问题。
打开F12,发现下图问题。
因为我在github中关于Hexo的仓库名为850552586.github.io,并不是Ericam.com,所以导致了访问无效。
【这个问题可能是因为我更换电脑后重新配置Hexo忽略的地方】
解决方案:打开_config.yml修改下述内容
(四)相对路径引用的标签插件
通过常规的 markdown 语法和相对路径来引用图片和其它资源可能会导致它们在存档页或者主页上显示不正确。在Hexo 2时代,社区创建了很多插件来解决这个问题。但是,随着Hexo 3 的发布,许多新的标签插件被加入到了核心代码中。这使得你可以更简单地在文章中引用你的资源。
也就是说在存档页和主页不能使用和文章内容中的常规语法来引用图片。
比如说:当你打开文章资源文件夹功能后,你把一个 example.jpg
图片放在了你的资源文件夹中,如果通过使用相对路径的常规 markdown 语法 ![](/example.jpg)
,它将 不会 出现在首页上。(但是它会在文章中按你期待的方式工作)
正确的引用图片方式是使用下列的标签插件而不是 markdown :
{% asset_img example.jpg This is an example image %}
原创不易,请勿转载。如有问题,可以评论区留言。点赞!
hexo引用本地图片无法显示相关推荐
- hexo 本地图片不显示
1. 修改配置文件 修改文件_config.yml 里的post_asset_folder:这个选项设置为true 修改之后,再使用hexo n "hexo 本地图片不显示"时,目 ...
- python点击按钮浏览本地文件_Python button选取本地图片并显示的实例
从本地文件夹中选取一张图片并在canvas上显示 from tkinter import * from tkinter import filedialog from PIL import Image, ...
- 解决MarkDown上传本地图片无法显示
解决MarkDown上传本地图片无法显示 前言 提示:什么牛头马面写的代码,今天写个技术博客想插入一张图片发现无法显示,接着按流程在博客一顿找,发现我开头第一句,不知道怎么形容垃圾场里面找垃圾的心情. ...
- js小学生图区_js读取本地图片并显示
版权声明:本文为博主原创文章,未经博主允许不得转载. 根据项目需要,需要选择本地图片并显示在页面上,然后上传至服务器.因为自身刚刚接触js,所以比较生疏,碰到问题吼,幸好有强大的网络,搜索很多有用的资 ...
- 百度地图自定义图标icon 添加本地图片无法显示问题解决
百度地图自定义图标icon 添加本地图片无法显示问题解决 我们在阿里巴巴矢量库找的icon 保存到本地 结论 我们在阿里巴巴矢量库找的icon 保存到本地 链接: 阿里巴巴矢量库. 图片: 随便找一个 ...
- 有道云笔记Markdown中引用本地图片
用过有道云笔记的同志都知道,用markdown写文章时引用本地图片要会员(csdn多好,免费给你上传本地图片),这里给大家介绍一种方法可以应用本地图片. Step 1:将本地图片上传到有道云 Step ...
- 解决导入markdown时本地图片无法显示问题——图床
解决导入markdown时本地图片无法显示问题--图床 图床工具: PicGo 图片服务器:Gitee 辅助工具:Node.js 14.17.6 图床: 一般是指储存图片的服务器,有国内和国外之分.国 ...
- Android获取手机本地图片并显示
一.序言 在安卓开发过程中,有时候我们的应用需要使用手机本地图片,这就需要本地图片访问权限以及相关的获取方法,本文将手机本地图片的获取流程和代码做了一个总结,希望能够对大家有一定帮助: 二.功能分析 ...
- 解决van-image引入本地图片无法显示
在vue文件中使用<van-image>引用本地图片时,不能直接使用地址,应该在地址前面用require包上: :src="require(url)" <van- ...
最新文章
- JavaScript深度学习
- 送书福利 | 大数据智能:数据驱动的自然语言处理技术
- linux安装通用plsql数据库,linux centOs中安装好数据库,客户端用plsql连接oracle
- jBPM4工作流开发实战 之 第五部分 其他知识
- iphone屏幕突然变暗_如果你的iPhone屏幕突然变暗,可以这样解决
- 微信小程序console.log出来的是object的问题解决方法
- jQuery实现列表数据从右至左滚动(类似弹幕)
- debian uefi legacy 区别_电脑硬盘格式有Legacy与UEFI,选择哪一个好?千万别选错了!...
- qml 时间控件_Qt6官方最新消息:桌面样式Qt quick Controls 2支持大多控件,委托更少,运行更流畅...
- 1人30天44587行代码,分享舍得网开发经验(修改版)
- 第3章:混仿高级特性
- PART 3.3 风控建模卡方分箱计算篇
- 关于namecheap 域名运营商,域名赎回详细步骤
- js改变html font size,JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)...
- SpringCloud入门实例
- 烂泥:Domino8.5服务器迁移方案
- android remoteviews 设置背景,理解RemoteViews
- 修改Chem 3D模型的化学键属性的方法有哪些
- 是时候让企业拥有“AI自由”了
- 双系统苹果Mac笔记本如何切换windows系统?