关于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. [javascript]jsonp-function 代码段

    (function($1454395832823,arr_infoList /**/) { $1454395832823.push(' '); for(var i in arr_infoList) { ...

  2. 9.json和jsonpath

    数据提取之JSON与JsonPATH JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,它使得人们很容易的进行阅读和编写.同时也方便了机器进行解析和生成.适 ...

  3. petaPoco

    petaPoco出现在2011年...因此老鸟可忽略该贴...目前最新版是 5.0, 但核心文件变化不大. 在众多的ORM框架中, 其中不乏非常优秀的EF, 但今天仍然想写点关于PetaPoco的文字 ...

  4. Redis 5.0 安装

    下载安装RedisServer mkdir –p /data/download && cd /data/download wget http://download.redis.io/r ...

  5. WPF Layout 系统概述 MeasureOverride和ArrangeOverride

    说的非常的好:多参考!!! https://blog.csdn.net/nncrystal/article/details/47416339 https://www.cnblogs.com/dingl ...

  6. ASP.NET MVC 中 Autofac依赖注入DI 控制反转IOC 了解一下

    先简单了解一这个几个 名词的意思. 控制反转(IOC) 依赖注入(DI) 并不是某种技术. 而是一种思想.一种面向对象编程法则 什么是控制反转(IOC)?  什么是依赖注入(DI) 可以点击下面链接 ...

  7. AJPFX讲解外汇保证金交易的货币符号和外汇的报价方式

    AJPFX:外汇保证金交易的货币符号 认识货币名字是必须的入门基础,通过货币符号,首先要知道买卖哪个货币,下面是一些货币的符号.买卖外汇就是这些任意其中某两种货币的比值,也就是汇率.根据汇率比的升高或 ...

  8. BZOJ 2200--[Usaco2011 Jan]道路和航线(最短路&拓扑排序)

    2200: [Usaco2011 Jan]道路和航线 Time Limit: 10 Sec  Memory Limit: 259 MBSubmit: 1128  Solved: 414[Submit] ...

  9. 31_网络编程-struct

    一.struct   1.简述  我们可以借助一个模块,这个模块可以把要发送的数据长度转换成固定长度的字节.这样客户端每次接收消息之前只要先接受这个固定长度字节的内容看一看接下来要接收的信息大小,那么 ...

  10. [Leetcode]315.计算右侧小于当前元素的个数 (6种方法)

    链接 给定一个整数数组 nums,按要求返回一个新数组 counts.数组 counts 有该性质: counts[i] 的值是  nums[i] 右侧小于 nums[i] 的元素的数量. 示例: 输 ...