前言

這篇是我自己碰到問題時的情況，與整個解決問題過程的筆記。

真的非常困擾啊!
更何況我解這個 bug 解了快一個禮拜！不寫篇文實在是過不去啊！

主要分成下面兩種問題：

wordpress 引用文章/文章連結時縮圖壞掉/破圖/沒有顯示縮圖：

圖片說明如下：

這篇是我自己引用自己文章時，意外發現產生的破圖情形!!
可以很明顯看到就是圖片壞了。(但實際上是有圖的)

wordpress 引用文章/文章連結時縮圖壞掉/破圖/沒有顯示縮圖：

圖片說明如下：

可以看到 facebook 並沒有顯示這篇文章的縮圖!
(但實際上是有圖的)

解決過程

第一種嘗試 - 重新更新縮圖

既然是圖片的問題，想當然就直接就縮圖重新產生下手。

因此我找了「regenerate Thumbnails」之類的外掛，

結果：失敗了。

第二種嘗試 - 把 wordpress 外掛全關掉的嘗試是常識吧! (誤)

把 wordpress 外掛全關掉的嘗試是一定要做的!

畢竟今天搞不好是哪個外掛不小心衝突了，誰知道呢?

結果：失敗了QQ。

插曲01 - 好像只有 windows 有問題?

這是我偶然嘗試後的發現，
其實這個問題只有出現在 windows上的 chrome

因為我試了「mac」、「手機」以下都能夠正常的顯示出圖片：

△(mac 上顯示的示意圖，看！是我可愛的大臉(誤))

第三種嘗試 - 直接換掉原圖

因為有插曲01的關係，
我推測可能是因為「mac」、「手機」螢幕比我的 windows 小，
所以我就開始嘗試替換掉原圖 (700x700)，換一張更大的原圖給他!

主要原因是因為在第一種嘗試中，意外發現缺少了某些大小的縮圖：

「直接換掉原圖」也是超冷門的知識，意外在這次解法中學到了!
我找到「ENABLE MEDIA REPLACE」這個外掛!

至於之所以會這樣做是因為我發現其實在手機上可以正常顯示的!
我打算直接把原本的圖片換掉!給他一張更大的!

結果：還是失敗了。

插曲02 - 好像只有 chrome 有問題?

這是我偶然嘗試後的發現，
其實這個問題只有出現在 windows上的 chrome

以下都能夠正常的顯示出圖片：

mac - safari
mac - chrome
iphone - safari
iphone - chrome
windows - edge
windows - firefox

看到後來我就以為是 chrome 的問題了

第四種嘗試 - 用 chrome 無痕嘗試、關閉所有 chrome 的擴充功能

我以為是擴充功能在搞鬼，但結果不是QQ
不論是「用 chrome 無痕嘗試、關閉所有 chrome 的擴充功能」結果都沒有效QQ

結果：失敗了

第五種嘗試 - 能google的都找完了，能試的都試了，只好問客服了

我得到的答案包含一個關鍵字可能是「防盜鏈」設定的問題!
(客服很貼心的還提供我可以參考的程式碼)

只好來研究一下自己沒碰過的 php 惹 QQ

因此我找到了這篇網站
https://sofree.cc/htaccess-img/

照著他所說的改! 感覺很有機會哦!

這邊提示一下：要更改的路徑位置在「./public_html/.htacess」

結果：還是失敗了，但我認為某些人的情況應該可以成功

第六種嘗試 - 就是「防盜鏈」設定的問題!

上面直接暴力改 code 沒用，原本已經心灰意冷覺得沒救了!
後來打開我自己的 GUI後台，
意外發現這個!

點進去設定一下，意外的!!!

結果：成功! (個人猜測可能這邊的設定會把第五種嘗試的 php 洗掉，才會導致這樣。)

△(看！是我可愛的大臉! 終於順利跑出來了! (誤))

△(facebook 分享也是一併正常的囉！)

Reference

https://wordpress.blog.tw/wordpress-plugin-enable-media-replace/
https://sofree.cc/htaccess-img/