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

关于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

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

早点睡觉了,不修仙

原文地址:https://www.cnblogs.com/xiaohuiduan/p/9865116.html

时间: 2024-08-06 13:31:35

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

TFS中Web管理编辑器插入图片路径问题

在使用TFS的Web管理,新建工作时在编辑器中添加附件,成功之后在编辑器中经常无法正常显示(没有使用机器名访问TFS服务器.或者跟服务器不同的域或者使用外网地址访问等). 首先找到: Microsoft Team Foundation Server 12.0\Application Tier\Web Services\web.config文件中的 <compilation defaultLanguage="c#" explicit="true" debug=&

vue-cli在打包后js获取的图片路径错误问题时候

在用npm run build 打包的时候,正常img标签中的src图片路径和css中的图片路径是可以正常识别的, 但是在打包js获取的图片路径时,打包后无法找到图片,原因是 js动态生成的路径无法被url-loader解析到,如果你去build,会发现图片甚至不会打包输出到dist目录(webpack是按需打包的). 如果你是vue-cli初始化的项目,解决的办法:第一步,把图片放到src同级的static目录(build/build.js文件中有一段代码是把static目录拷贝到dist/s

ueditor 在线附件和在线图片路径错误BUG补丁

错误 ueditor上传附件时显示和下载都是正常的,当下次点击在线附件时图片图标显示错误,再添加到网页中访问的时候出现404错误,比如:第一次添加:http://192.168.1.4:8080/uedit2/ueditor/jsp/upload/file/20140622/1403423931425017681.png第二次就变成了:http://192.168.1.4:8080/uedit2/C:/Program Files/Apache Software Foundation/Tomcat

求助,关于webpack url-loader配置图片路径错误的问题

这是我css文件图片引入的位置 这是我的webpack配置 最后就会出现这种路径,如果我把url-loader的输出名改成name=../images/[name].[ext],这样它会把图片输出到dist同级的位置,而不是dist目录内,求教怎么解决! 回答:你得配置个output.publicPath参数,我观察你的文件目录结构,初步建议你配成publicPath: './dist',如果在浏览器里路径报错了,你可以参照着你自己的文件目录结构来改下这相对路径.

Img控件图片路径错误,显示默认图片

<img src="路劲"  onerror="this.src='img/error.png'"/> onerror路径一定要正确,最好是本项目的文本.不然一直错误,就会一直循环onerror 原文地址:https://www.cnblogs.com/liuzheng0612/p/11468612.html

Vue项目打包后背景图片路径错误

vue项目打包之后背景图片出错的解决方案如下: 1,找到 config->index.js里面,如下修改 默认配置: env: require('./prod.env'), index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: '/', 修改为: env

解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题

在config/index.js中的build命令的配置有一个属性叫assetsPublicPath,它的值为‘/’.意思是根目录,这时会从index.html所在的硬盘的根目录下开始查找,自然无法找到. 解决办法:改为‘./’这时就不再是绝对路径的根目录了,而是改为了相对路径,同目录下进行查找. build: { ... assetsPublicPath: './', 原文地址:https://www.cnblogs.com/223zzm/p/11259104.html

Hexo中如何用Markdown插入本地图片

虽然在官方语法中,Markdown插入图片的格式是这样的: ![Alt text](/path/to/img.jpg) 然而,如果你用了Hexo框架,那你得小心了. 为什么要用Hexo,Octopress之类的框架呢?无非是为了让页面更加丰富多彩,以及让操作更加简便.这些用jeklly直接来做是十分繁琐,费时的. 好了,回归正题.首先,你不可能在网页里用绝对路径,这样怎么部署到服务器上呢?所以必定是相对路径.Markdown本来的语法中,只要img和md文件的相对路径是对的就行,然而Hexo不知

CSDN Markdown语法之如何插入图片

目录 图片上传方式 插入在线图片 插入本地图片 图片链接方式 行内式图片链接 参考式图片链接 几个问题探讨 问题1:图片上传和图片链接两种方式的区别 问题2:Markdown中如何指定图片的高和宽? 问题3:Markdown中如何指定图片的对齐方式? 正文 在CSDN Markdown编辑器中插入图片有两种方式: 使用工具栏上的图片上传功能 自己动手写图片链接的方式 下面分别介绍它们的使用方法. 图片上传方式 这种方式最简单,属图形化方式.大家可以很容易的在CSDN Markdown编辑器的工具