• 如何解决markdown文件中图片失效的问题


    如何解决markdown笔记移动后,图片失效的问题。

    写在前面:由于最近经常使用Typora进行.md笔记的编写,发现.md文件迁移后,就会出现文件中图片不能正常显示的问题。故,写此文以罗列曾踩过的坑以及列出几种解决办法。

    ps:我最终是将图片全部保存至sm.ms图床,用图片的url替换掉原来.md笔记中图片的本地路径链接。虽然图床类工具的稳定性有待商榷,但就目前的使用感来说,sm.ms还算稳定,可以满足我当下的需求。如果有朋友已经用更好的办法解决了此问题,希望可以分享一下经验,可以在文章下方留言评论,感谢。

    踩过的坑 and 解决方法如下:

    1.使用相对路径 -坑1

    将.md文件中的图片路径改为相对路径。

    以Typora为例,具体操作如下:

    1th:打开文件 -->偏好设置

    2th:找到编辑器 --> 将图片插入一栏改为: 复制图片到./${filename}.assets文件夹。

    3th:设置好后,当你再在.md笔记中插入图片时,就会在当前文件目录下生成一个图片的文件夹,以后再移动.md笔记时,2者一起移动即可解决移动后图片失效的问题。

    优点:可以解决插入本地图片后,在本地移动.md文件后,图片失效的问题。

    缺点:若将.md文件上传到码云/博客园/CSDN/开源中国,图片依然无法正常显示。

    2.将图片转存至百度网盘 -坑2

    1th:将.md文件里的图片上传至百度网盘 -->创建分享链接 ,选永久有效。

    2th:将分享链接在搜狗浏览器打开 -->复制图片的url。 ps:只有搜狗浏览器支持此功能。

    3th:用该url去替换.md文件中的原有图片本地地址。再移动/上传博客园等均不会出现图片失效的问题。

    ps:.md文件中插入图片的格式为:

    ![对该图片的描述](图片地址)
    

    优点:可以解决.md文件移动/上传博客园后图片失效的问题。

    缺点:因为图片在传输过程中会被进行压缩,故会产生图片失真的问题。此种方法适合对图片清晰度要求不高的朋友。

    3.将.md文件中插入的图片上传至码云/github - 码云的坑(待填)

    以码云为例:

    1th:在码云上创建一个个人仓库用于放.md文件中插入的图片 -如何建仓库,大家都清楚,不再赘述。

    2th:在本地创建一个文件夹盛放你的图片,文件夹名称和仓库名保持一致;

    3th:将该文件夹里的图片推送至码云图片仓库;

    4th:在你的码云项目中找到该图片,复制图片的url;

    5th:用该url去替换.md文件中图片的本地地址。

    6th:将url中的blob改为raw,图片即可自动显示出来。

    但是,结果失败了。查了一些资料后,才清楚,只有github的图片加速还行,能够将图片显示出来。用码云的话,图片根本加载不出来,只会显示文字。

    故,大家可以将图片上传至github,以解决此问题。操作同上。

    优点:上传至github可以完全解决.md文件移动/上传博客园后图片失效的问题。且安全稳定,不用担心图片丢失的问题。

    缺点:只能用github,码云图片加速慢,无法显示图片。

    (ps:填坑 -.md中插入图片格式中的()里改成相对地址-即项目根目录下的地址。参考:https://cloud.tencent.com/developer/article/1333082)

    4.将.md文件中插入的图片保存至图床

    操作方法:把.md文件中要插入的图片保存到某个图床服务里,然后获取该图片的url,用该url去替换笔记中的原始本地路径链接,然后图片就能正常显示了。

    以sm.ms图床为例,具体操作如下:

    1th:选择要上传的图片,每次最多上传10张,每张图片小于5M。-未登录状态最多20张/hour。建议登录状态下上传。

    2th:上传 --登录后上传速度快。

    3th:上传完成。复制该图片的markdown链接去替换原.md文件里图片的本地地址。图片即可自动显示出来。

    缺点不稳定,保存至图床的图片随时可能丢失。想必微博图床的事大家都清楚,前车之鉴。有能力的话,建议自己搭建一个个人图床,另外,这里吐槽一句,PicGo + github比七牛云 + Mpic要好,因为七牛云的测试域名收回后,还得去自己备案域名。

    优点:可以解决.md文件移动/上传博客园后图片失效的问题。

    ps:就目前而言,我感觉sm.ms图床还不错,不管是稳定性还是上传图片的限制,都在可接受范围内。不过在未登录情况下,每小时只能传20张。登录后,限制取消。

    这里给大家推荐几种免费的图床

    七牛云:官网地址:https://portal.qiniu.com ,注册认证后有10G永久免费空间,图片上传无限制。但一个月后会收回测试域名,因此你必须要绑定自己的已经备案的域名。

    又拍云:官网地址:https://www.upyun.com ,注册认证后有10G永久免费空间,图片上传无限制。需要绑定自己的已备案域名。

    腾讯云:官网地址:https://cloud.tencent.com ,仅可以使用六个月的免费存储容量、免费请求和免费流量,图片上传限制比较多。具体请参考官网。

    sm.ms:官网地址:https://sm.ms ,永久存储免注册,图片链接支持https,可以删除上传的图片,提供多种图片链接格式。图片上传限制:每个图片最大5M,每次最多上传10张。

    postimg:官网地址:https://postimages.org ,国外的图床,永久存储免注册,图片链接支持https,可以删除上传的图片,提供多种图片链接格式。图片上传限制:对像素和图片大小有要求。

    小结:如果打算长期稳定使用请优先选择又拍云或者七牛云(需要有自己的已备案域名),如果是存储并不重要的图片可以使用SM.MS图床。
    写在最后:如果只在博客园写博客,则直接将图片拖进来即可。会自动生成url。

  • 相关阅读:
    JSP内置对象--out对象(了解即可)
    JSP内置对象--web安全性及config对象的使用 (了解即可)
    JSP内置对象--application对象(getRealPath(),getAttributeNames(),getContextPath())
    JSP内置对象--session对象(getId(),getCreationTime(),getLastAccessedTime(),isNew(),invalidate(),setAttribute(),getAttribute())
    JSP内置对象--response对象 (addCookie(),setHeader(),sendRedirect())
    JSP内置对象--request对象 (setCharacterEncoding("GBK"),getParameter(),getParameterValues(),getParameterNames(),getServletPath(),getContextPath()
    JSP内置对象--4种属性范围 (pageContext,request,session,application)
    查看,设置,设备的 竖屏-横屏模式 screen.orientation
    网络推送通知:及时,相关和准确 (navigator.serviceWorker.register(), window.PushManager, new Notification)
    为网站添加触摸功能 (PointerEvents , TouchEvents , MouseEvents )
  • 原文地址:https://www.cnblogs.com/wanshizidiao/p/11273297.html
Copyright © 2020-2023  润新知