在hexo中发表文章时发现自己的图片无法显示,这是因为hexo在解析你的文章时找不到你的图片路径,下面说一下如何配置文章中的图片路径
打开在hexo根目录下的 _config.yml 配置文件,找到 post_asset_folder 属性,默认为 false 改为 true
在hexo根目录下执行如下命令
此时再执行命令 hexo n article_name 创建新的文章,在 source/_posts 中会生成文章 post_name.md 和同名文件夹 post_name , 我们将文章中所使用到的将图片资源均放在 post_name 中 ,这时就可以在文章中使用相对路径引用图片资源了
[img_name](img_name.jpg) #文章中的图片资源路径格式
Hexo是一个静态的博客网站生成器,生成一个博客只需要分分钟的时间就能搞定。
Hexo的博文是支持Markdown格式的,发表一篇文章只需要简简单单的几个命令。
hexo new '文章' 就会生成一个名为'文章'的md文件。
在图中位置添加描述,分类以及标签,有利于搜索分类。
众所周知,在md文件中插入图片的语法为 ![]() 。
其中 方括号 是图片描述, 圆括号 是图片路径。
一般来说有三种图片路径,分别是 相对路径,绝对路径和网络路径 。
所谓的网络路径就是直接引用网上的图片,直接复制图片地址,放在圆括号中就完事了。
这种方式十分的方便,但是也存在一定的问题:
这种方式算是有利有弊。
绝对路径是图片在计算机中的绝对位置,相对路径是相对于当前文件的路径。
由于我们的博客是要部署在网站上,部署后会生成新的文件目录,所以我们选择使用相对路径的方式。
在hexo中使用 文章资源文件夹 需要在 config.yaml 文件中更改一下配置:
当该配置被应用后,使用 hexo new 命令创建新文章时,会生成相同名字的文件夹,也就是文章资源文件夹。
虽然可以正常引用图片了,但是这种引用图片的方式只有一句话能形容,wtf。
插件 hexo-renderer-marked 解决了这个问题。可以只用 npm install hexo-renderer-marked 命令直接安装,之后在 config.yaml 中更改配置如下:
之后就可以在使用 [图片上传失败...(image-5f3c69-1603081095188)] 的方式愉快的插入图片了。
我们做了这么多都是为了方便,那么为什么不再方便一点呢。
上述是从文章资源文件夹中引用图片,前提是 先将图片放入到文章资源文件夹 ,如果图片数量众多的话,一张一张的放很影响效率。但是不用怕,我们有很方便的解决方法。
Typora 是我非常喜欢的Markdown文本编辑器,在之前的文章中也介绍过一点。
Typora对于插入图片的支持做得非常好,在 文件->偏好设置 或者直接 <C-,>进入设置。
使用该配置后,可以直接复制网页中的图片地址,粘贴到Typora中后,会直接复制该图片到文章资源文件夹,同时自动更改路径。
如复制网络路径的图片 https://...../image.jpg 粘贴到Typora中叫 文章名 的文章后,图片会自动变为 [图片上传失败...(image-bd41f4-1603081095188)] 。
但我们知道部署后,文件路径是不同的,所以当我们插入完所有的图片后,我们还需要删除每个图片路径中的 文件名/ 。不慌,也很简单。
在Typora编辑器中,使用 <C-f>快捷键,将所有的 文章名/ 替换为空即可删除。
然后再将博客上传,图片就会随着文章一起打包。在网页中就可以看到正常显示的图片,大功告成。
hexo引入图片的方式有很多种:
Hexo使用图床的方式加载在blog中加载图片,会在非本人的电脑或者手机端报“html访问图片资源403问题(http referrer)”,导致采用图床方式加载的图片全部无法加载。
http请求体的header中有一个referrer字段,用来表示发起http请求的源地址信息,这个referrer信息是可以省略但是不可修改的,就是说你只能设置是否带上这个referrer信息,不能定制referrer里面的值。
服务器端在拿到这个referrer值后就可以进行相关的处理,比如图片资源,可以通过referrer值判断请求是否来自本站,若不是则返回403或者重定向返回其他信息,从而实现图片的防盗链。上面出现403就是因为,请求的是别人服务器上的资源,但把自己的referrer信息带过去了,被对方服务器拦截返回了403。
在前端可以通过meta来设置referrer policy(来源策略),具体可以设置哪些值以及对应的结果参考 这里 。所以针对上面的403情况的解决方法,就是把referrer设置成 no-referrer ,这样发送请求不会带上referrer信息,对方服务器也就无法拦截了。
浏览器中referrer默认的值是 no-referrer-when-downgrade ,就是除了降级请求的情况以外都会带上referrer信息。降级请求是指https协议的地址去请求http协议,所以上面403的情况还有另一种解决方法就是,请求的图片地址换成http协议,自己的地址使用http协议,这样降级请求也不会带上referrer。
在G:\blog\themes\butterfly\layout\includes目录下有一个head.pug文件,修改该文件的meta信息,会使生成的所有页面都带有该head。在head.pug文件中添加如下内容,结果参见图片。
在G:\blog\themes\yilia\layout_partial目录下有一个head.ejs,同样在head.ejs文件中添加如下meta信息即可
在G:\blog\public\2021目录下就是所有21年生成的blog,找到该目录下的任意一个index.html,用文本编辑器打开就可以看到已经自动生成了referrer标签了。
然后使用hexo d指令将工程同步到github即可
1. 加载本地图片的方法
2. html访问图片资源403问题(http referrer)
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)