當前位置:編程學習大全網 - 源碼下載 - 解決hexo引入圖床,手機和web不顯示圖片的問題

解決hexo引入圖床,手機和web不顯示圖片的問題

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)

  • 上一篇:linux fork 會***享哪些東西
  • 下一篇:冬季去雲南旅遊景點推薦有哪些?
  • copyright 2024編程學習大全網