惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

人人都是产品经理
人人都是产品经理
博客园_首页
IT之家
IT之家
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
Vercel News
Vercel News
美团技术团队
D
Docker
WordPress大学
WordPress大学
T
Tailwind CSS Blog
酷 壳 – CoolShell
酷 壳 – CoolShell
The Cloudflare Blog
Y
Y Combinator Blog
F
Fortinet All Blogs
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
G
Google Developers Blog
爱范儿
爱范儿
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
月光博客
月光博客
MongoDB | Blog
MongoDB | Blog
S
SegmentFault 最新的问题
GbyAI
GbyAI
Hugging Face - Blog
Hugging Face - Blog
Microsoft Azure Blog
Microsoft Azure Blog
A
About on SuperTechFans

Mereith's Blog

记一次代理转发问题的排查与解决 PVE DataCenter Manager 端口号跳转错误修复 k8s + jenkins + gitlab 触发器 【转载】没有编程生产力这样的东西 【后续】居然被 ddos 了 居然被 ddos 了 Tagger - 让版本标签管理更简单 openclash 开启后端口转发失效 nextjs 启动时执行代码 买了太多VPS不知道干什么,干脆做个网站 juhost Level-1 测评 VMISS CN - Hong Kong VMISS JP - Tokyo - BGP 测评 VMISS CN - Hong Kong - BGP HomeLab 的终点是 最近在做的事情 因为选择艰难症,自己写了一套开源博客系统 手撸一个nodejs分布式爬虫,还要可视化 HomeLab 分享 我的个人工作流——开源项目推荐 动手写一个超简单的编译器 safari 插件开发 Safari Extensions Preferences 按钮无响应 设置移动端软键盘回车按钮文案 nginx proxy manager 非标准端口反代 Host 不对 监控 k8s ingress 自动添加域名 DNS 解析 使用 ingress 注解给 traefik ingress 添加中间件 使用流水线功能为文章添加固定结尾 为 VanBlog 添加一个小挂件 基于React/umi/egg自建博客系统 如何正确停止 NodeJS 子进程
hexo引用本地图片无法显示
wanglu@mereith.com (mereith) · 2022-07-21 · via Mereith's Blog

请注意,本文编写于 2326 天前,最后修改于 1416 天前,其中某些信息可能已经过时。

最近有时间了,重新升级启用 hexo&next,但是发现升级以后,本地图片没办法显示了! 在网页处用开发工具查看图片地址,发现地址不对,于是寻找原因。

可能的原因如下:

插件没安装

安装一个图片路径转换插件 hexo-asset-image 用npm安装即可

_config.yml没有修改

打开hexo目录下的_config.yml,修改下面内容:


插件没有修改

打开/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; 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){ 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(); } } });

本地图片没有放到同名文件夹中

将需要引用的本地图片存放在与文章名相同的文件夹中即可

图片路径url出错

解决方案:打开hexo目录下的_config.yml修改下述内容

# URL ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/' url: http://www.mereith.com root: /

更好的方式

可以用标签来通过相对路径引用图片 当你在_config.yml中开启了post_asset_folder(它会在建立文章的时候自动生成同名的资源文件夹),那么你可以这样在文章里引用在同名文件夹里的door.jpg-slim

{% asset_img door.jpg-slim 这是一个测试哦 %}