草庐IT

解决Hexo无法显示图片的几种方案

weixin_42030522 2023-12-01 原文

解决Hexo无法显示图片的几种方案

欢迎大家访问我的博客：https://bankyin.github.io/
在搭建hexo博客的时候会遇见图片上传是否麻烦，使用markdown编写博客时我们习惯将图片保存到本地，使用‘![]{}’的格式+相对路径去插入图片，但是在使用hexo d的时候相对路径会被转换导致最后发布上去的博客图片无法查看。下面提供几种解决方案：

使用hexo图片格式

查看hexo官网，可以看到官网推荐将post_asset_folder属性置为true，在新建博客hexo n “xxx”的时候会在根目录下创建一个同名的文件夹，将需要插入的图片放到这个目录。

在markdown文件中使用如下格式进行图片的访问：

{% asset_path slug %}
{% asset_img slug [title] %}
{% asset_link slug [title] %}

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

如此就能够在hexo中访问到图片，但是这种方式，我们在VScode或者Typora种编写文档的时候是无法查看到图片的，无法渲染。

为了解决无法渲染和不习惯的图片插入格式，可以使用hexo-asset-image。

在根目录安装hexo-asset-image，就能按照markdown的格式进行图片的插入。

npm install https://github.com/CodeFalling/hexo-asset-image --save

不过好像hexo3之后由于图片路径中有时间格式导致不可访问，后面再研究这个方式吧，可以暂时使用hexo推荐的格式。

搭建阿里云图床+typora配置实现对象存储

第二种方式使用图床，将图片上传到对象存储，好处是方便！！！

  1. 首先申请一个对象存储OSS，登录阿里云->进入工作台->对象存储OSS

​

  1. 点击创建Bucket：

​

  1. 修改以下部分：

​

  1. 开通完成后，先购买资源包（对象存储的下载和访问会消耗流量费用，建议购买一个资源包，半年也就5块钱不到）

    以上对象存储部分就申请好了，下面就是整合到PicGo

  2. 下载typroa

    这里提供一个typroa的下载地址，当然还是建议付费，支持开发者。

    链接：https://pan.baidu.com/s/1PpMt21LcWAH4MJrNvaWxWQ

    提取码：8jkp

  3. 安装PicGo-Core插件

    下载好后依次点击：文件->偏好设置->图像，按照如下配置后点击下载或更新。

  4. 设置配置文件

    点击打开配置文件：按照如下配置

    {
    "picBed": {
      "uploader": "aliyun",
      "aliyun": {
      "accessKeyId": "", //ram的accessKey
      "accessKeySecret": "", //ram的accessKey
      "bucket": "", // 桶名
      "area": "", // 地域节点
      "path": "img/", // 存储路径
       "customUrl": "", // Bucket域名，注意要加 http://或者 https://
       "options": "" // 针对图片的一些后缀处理参数 PicGo 2.2.0+ PicGo-Core 1.4.0+
      }
    },
    "picgoPlugins": {}
  }

    接下来就需要找到上面的配置：

    首先是accessKey：访问accessKey管理

    然后会出现创建新的AccessKey：可以直接点击继续使用就是用当前用户进行创建AccessKey，不过还是建议使用子用户，规划一下权限。创建好后记得立马将显示的accessKeyId和accessKeySecret记录下来，后续没有地方可以查看，若是遗忘只能重新创建。

    其余字段在对象存储->bucket列表->概览，分别是bucket、area、customUrl的值，其中area只需要三级域名也就是.aliyuncs.com之前的部分，customUrl则需要添加http://

    剩下字段可以不配置。

  5. 验证

    配置好后，就可以进行测试是否配置成功，点击验证图片上传选项，typora会将icon上传到对象存储中，可以自行去阿里云控制台查看是否有文件。

​

  1. 大功告成

    完成后，就可以直接在typora中复制图片或者使用快捷键ctrl+shift+i进行图片插入。typora会自动将图片上传到对象存储并将路径改为对象存储中的路径。

显示图Hexospanclasstokengithubvscodegit

有关解决Hexo无法显示图片的几种方案的更多相关文章

  1. ruby-on-rails - 由于 "wkhtmltopdf"，PDFKIT 显然无法正常工作 - 2

    我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中，我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-

  2. ruby-on-rails - Rails 编辑表单不显示嵌套项 - 2

    我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib

  3. ruby - 解析 RDFa、微数据等的最佳方式是什么，使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  4. ruby-on-rails - 无法使用 Rails 3.2 创建插件？ - 2

    我对最新版本的Rails有疑问。我创建了一个新应用程序(railsnewMyProject)，但我没有脚本/生成，只有脚本/rails，当我输入ruby./script/railsgeneratepluginmy_plugin"Couldnotfindgeneratorplugin.".你知道如何生成插件模板吗？没有这个命令可以创建插件吗？PS:我正在使用Rails3.2.1和ruby​​1.8.7[universal-darwin11.0] 最佳答案 随着Rails3.2.0的发布，插件生成器已经被移除。查看变更日志here.现在

  5. ruby - 无法运行 Rails 2.x 应用程序 - 2

    我尝试运行2.x应用程序。我使用rvm并为此应用程序设置其他版本的ruby​​:$rvmuseree-1.8.7-head我尝试运行服务器，然后出现很多错误:$script/serverNOTE:Gem.source_indexisdeprecated,useSpecification.Itwillberemovedonorafter2011-11-01.Gem.source_indexcalledfrom/Users/serg/rails_projects_terminal/work_proj/spohelp/config/../vendor/rails/railties/lib/r

  6. ruby - 在 jRuby 中使用 'fork' 生成进程的替代方案？ - 2

    在MRIRuby中我可以这样做:deftransferinternal_server=self.init_serverpid=forkdointernal_server.runend#Maketheserverprocessrunindependently.Process.detach(pid)internal_client=self.init_client#Dootherstuffwithconnectingtointernal_server...internal_client.post('somedata')ensure#KillserverProcess.kill('KILL',

  7. ruby-on-rails - 无法在centos上安装therubyracer(V8和GCC出错) - 2

    我正在尝试在我的centos服务器上安装therubyracer，但遇到了麻烦。$geminstalltherubyracerBuildingnativeextensions.Thiscouldtakeawhile...ERROR:Errorinstallingtherubyracer:ERROR:Failedtobuildgemnativeextension./usr/local/rvm/rubies/ruby-1.9.3-p125/bin/rubyextconf.rbcheckingformain()in-lpthread...yescheckingforv8.h...no***e

  8. ruby - 无法让 RSpec 工作—— 'require' : cannot load such file - 2

    我花了三天的时间用头撞墙，试图弄清楚为什么简单的“rake”不能通过我的规范文件。如果您遇到这种情况:任何文件夹路径中都不要有空格!。严重地。事实上，从现在开始，您命名的任何内容都没有空格。这是我的控制台输出:(在/Users/*****/Desktop/LearningRuby/learn_ruby)$rake/Users/*******/Desktop/LearningRuby/learn_ruby/00_hello/hello_spec.rb:116:in`require':cannotloadsuchfile--hello(LoadError) 最佳

  9. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  10. ruby-on-rails - link_to 不显示任何 rails - 2

    我试图在索引页中创建一个超链接，但它没有显示，也没有给出任何错误。这是我的index.html.erb代码。ListingarticlesTitleTextssss我检查了我的路线，我认为它们也没有问题。PrefixVerbURIPatternController#Actionwelcome_indexGET/welcome/index(.:format)welcome#indexarticlesGET/articles(.:format)articles#indexPOST/articles(.:format)articles#createnew_articleGET/article

随机推荐