关于Markdown插入图片路径错误的问题

开发问题 解决方法 

妈耶,连续一天写2篇博客,也是醉了,这篇博客主要是介绍关于Markdown插入图片路径错误的问题

在上篇中,我介绍了一下Markdown的基本语法,并且提到了图片插入的方式.不过有一个问题,就是当在vscode插入图片能够完美预览,但是当在本地服务器和Github上运行,图片就无法显示.

就像这样,图片无法显示


这时候查看网页源代码发现是这样的


查看文件目录


如果这之后将网址输入为

http://localhost:4000/2018/09/07/Markdown%E5%9F%BA%E6%9C%AC%E8%AF%AD%E6%B3%95/02.jpg

发现能够完美显示,那表示图片没问题,是路径的问题.在官方的参考资料中,使用了

{% asset_img example.jpg This is an example image %}

来引用图片. 不过个人觉得这样不是很好,首先它不是标准的markdown语法,其次无法实时预览.百度了很久,终于在一篇大佬的博客上找到了解决方法.

First Step

在 [你的hexo安装地址]\node_modules\hexo-asset-image 找到 index.js打开进行编辑

var beginPos = getPosition(link, '/', 3) + 1;
改成
var beginPos = getPosition(link, '/', 1) + 1;

这时候执行

hexo clean
hexo g
hexo s

就能能够完美的显示图片了

早点睡觉了,不修仙

关于Markdown插入图片路径错误的问题的更多相关文章

  1. MarkDown插入图片

    MarkDown插入图片的语法 ·编辑器:MacDown 比如博客园的Logo,URL是 http://static.cnblogs.com/images/logo_small.gif 在要插入图片的 ...

  2. webpack学习笔记——打包后直接访问页面,图片路径错误

    我说的这种图片路径错误是这样的,运行webpack-dev-server,一切正常,没有错误.当webpack之后,直接打开index页面,报错,图片找不到,找不到的原因是路径错误. 先看我的项目代码 ...

  3. 【Tips】有道云笔记中Markdown插入图片

    在有道云笔记中用MarkDown插入图片 新建一个文档专门用来放图片 把所有要用的图片专门放在一个笔记里,用普通模式先同步笔记,然后用分享笔记 会有一个链接,用浏览器打开这个分享的笔记就能找到所有的图 ...

  4. 优雅地在markdown插入图片

    markdown 中插入图片,好烦!!!   喜欢用Markdown写文字,但是它的图片引用是一个大问题(当然csdn不会遇到这个问题).借用第三方将图片储存在印象笔记上是一个好办法.但是会出现的一个 ...

  5. Markdown 插入图片技巧

    在使用Markdown编写博客或文件的时候,经常会需要插入图片.如果使用Markdown语法,我们会发现调整图片的大小会是个问题. 所以推荐使用另一种办法插入图片,使用HTML语法,示例如下: < ...

  6. Vue项目开发之打包后背景图片路径错误的坑

    在开发vue项目的过程中,使用浏览器进行预览的时候所有图片的路径是没有任何问题的,但是在打包后传到服务器上,在微信端查看背景图片时,background的图片竟然不显示,img标签里的图片却是正常展示 ...

  7. 解决Vue打包后背景图片路径错误问题

    1.原因解析 当用vue-cli自动构建项目后,有两种运行方法,分别是: npm run dev : 提供一个开发的环境,自动热更新,资源使用绝对路径,所以可以正常看到背景图片. npm run bu ...

  8. markdown 插入图片太大?怎么设定图片大小?

    你一定在插入图片的时候,遇到图片太大,影响观感的问题. Markdown中,图片大小的设定方式有两种 第一种: ![](https://img2018.cnblogs.com/blog/1735896 ...

  9. 有道云笔记MarkDown 插入图片

    前言: 在网上找了很多有道云笔记的markdown笔记如何插入本地图片,试了好几种方式都是一时可以显示而已,只要电脑重启或者换终端查看就无法显示图片了.网上常用的方法无非两种有效:github.博客. ...

随机推荐

  1. 转:mysql触发器

    原文地址:http://www.cnblogs.com/nicholas_f/archive/2009/09/22/1572050.html CREATE TRIGGER <触发器名称>  ...

  2. HDU 4920 矩阵乘积 优化

    Matrix multiplication Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/ ...

  3. cxgrid过滤使用心得

    uses cxFilter; cxgrid过滤条件清除:cxgrdbtblvwGrid1DBTableView2.DataController.Filter.AutoDataSetFilter:=Tr ...

  4. 报错:Missing type map configuration or unsupported mapping

    报错:Missing type map configuration or unsupported mapping □ 背景 当把View Model转换成Domain Model保存的时候,发生在Au ...

  5. 统计--VARCHAR与NVARCHAR在统计预估上的区别

    最近遇到一个问题,当查询使用到模糊查询时,由于预估返回行数过高,执行计划认为索引查找+Key Lookup的成本过高,因此采用Clustered Index Scan的方式,消耗大量逻辑IO,执行计划 ...

  6. VS2015中不同开发环境设置转换(C#->C++等)

    backup VS2015 社区版(Community)下载地址:迅雷下载:ed2k://|file|cn_visual_studio_community_2015_x86_dvd_6847368.i ...

  7. SignalR2结合ujtopo实现拓扑图动态变化

    上一篇文章基于jTopo的拓扑图设计工具库ujtopo,介绍了拓扑设计工具,这一篇我们使用SignalR2结合ujtopo实现拓扑图的动态变化. 仅仅作为演示,之前的文章SignalR2简易数据看板演 ...

  8. (zxing.net)二维码Aztec的简介、实现与解码

    一.简介 Aztec Code是1995年,由Hand HeldProducts公司的Dr. Andrew Longacre设计.它是一种高容量的二维条形码格式.它可以对ASCII和扩展ASCII码进 ...

  9. jquery banner 轮播配置方法

    1 概述 Banner可以作为网站页面的横幅广告,也可以作为游行活动时用的旗帜,还可以是报纸杂志上的大标题.Banner主要体现中心意旨,形象鲜明表达最主要的情感思想或宣传中心.在以往很多项目中主要体 ...

  10. C#6.0语言规范(十五) 委托

    委托启用其他语言(如C ++,Pascal和Modula)已使用函数指针进行寻址的方案.但是,与C ++函数指针不同,委托是完全面向对象的,与成员函数的C ++指针不同,委托封装了对象实例和方法. 委 ...