最近项目中,需要获取微信公众号文章。但是后端获取到文章后,交给前端展示时图片不显示。记录一下此问题及解决方案。
后端获取到的文章中的图片元素如下:
<img class="rich_pages wxw-img"
data-cropselx1="0"
data-cropselx2="578"
data-cropsely1="0"
data-cropsely2="216"
data-galleryid=""
data-ratio="0.3731481481481482"
data-s="300,640"
data-src="https://mmbiz.qpic.cn/mmbiz_jpg/Rg90urRfmIiaibRBicXTA4UdJeNjOBPN8jNxjsasb36gIhENibbQvz5nIBaLUznj8LIQCSNk5TDaDJe7S5wkTF14wg/640?wx_fmt=jpeg"
data-type="jpeg" data-w="1080"
style="font-size: 16px;width: 578px;height: auto !important;"
width="1080"/>
img元素中无src属性,data-src属性为图片地址。
后端获取data-src属性的值,并设置给img元素的src属性。
设置完成后,前端拿到图片,显示此图片来自微信公众平台,未经允许不可引用,如下图:

解决此问题,需在前端html中的head中增加<meta name="referrer" content="never">
<meta name="referrer" content="never">

问题解决,前端可正常显示。
golang 代码:
package main
import (
"fmt"
"github.com/PuerkitoBio/goquery"
"github.com/atotto/clipboard"
"github.com/gocolly/colly/v2"
)
func main() {
c := colly.NewCollector(
colly.AllowedDomains("mp.weixin.qq.com"),
)
// 获取js_content
c.OnHTML("div[id=js_content]", func(e *colly.HTMLElement) {
// 处理图片
_ = e.DOM.Find("img").Each(func(i int, selection *goquery.Selection) {
ret, _ := selection.Attr("data-src") // 获取 src
w, _ := selection.Attr("data-w") // 获取width
s, _ := selection.Attr("style") // 获取 style
selection.SetAttr("src", ret) // 设置属性src
selection.SetAttr("width", w) // 设置width
selection.SetAttr("style", s+"margin:auto;") // 设置style 并增加居中效果
})
html, _ := e.DOM.Html()
fmt.Println(html)
clipboard.WriteAll(html) // 复制到剪切板
})
c.Visit("https://mp.weixin.qq.com/s/6Yvp673e5QL0N2FKaeqvHA")
}