爬取图片文件时 Lazy Load（图片延迟加载）的处理(xpath定位方式)

注意：以后再遇到图片lazyload问题，先从找到真正属性入手，不要被加密和混淆绕远：如果控制台的elements里面看不到真正属性，那就右键从网页源代码里面找图片链接对应的真正属性！
在爬取脑筋猜词画迷题库的时候，爬取到的图片没有正常显示网页src后面对应的链接，而是显示’data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs='，如下图所示：

原因是src对应的链接，设置了lazyloaded（延迟加载），所以不应用src来获取图片链接，而是用data-src来获取

最终修改了图片的xpath定位方式后，能够成功拿到图片，而不再是base64的结果：

img = html.xpath('//table[@style="border-collapse: collapse; border: none;"]/tbody/tr/td/a/img/@data-src')

2022年3月10日更新：
今天在爬取另一个网站（https://verbalearn.com/game-tri-tue/dap-an-duoi-hinh-bat-chu/）的图片时，直接控制台查看elements，会发现没有“伪属性”用来存储真正的图片链接，只有一个noscript里面的text内容，包含了src：

如果直接拉取带有lazyload延迟加载的@src，则爬取到的内容不是图片地址，而是：
“data:image/svg+xml,%3Csvg%20xmlns=‘http://www.w3.org/2000/svg’%20viewBox=‘0%200%20750%20490’%3E%3C/svg%3E”

path = '//div[@class="entry-content"]/figure/img | //div[@class="entry-content"]/p/img'
results = html.xpath(path)
for result in results:
    img_text = result.xpath('./@src')
    print(img_text)
# 会输出："data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20750%20490'%3E%3C/svg%3E"

然而，如果爬取noscript的text()内容，又会输出：[<Element noscript at 0x22e418a9588>]，因为noscript的内容是非js内容，没法用xpath来选取

最终解决方式：
是通过右键查看网页源代码，发现图片的真正代码如下，可以看到@src的内容是"data:image/svg+xml,…"，所以不是图片被加密，而是爬取的@src是伪属性，在源代码中看到图片真正地址对应的属性是@data-lazy-src

<figure id="attachment_5312" aria-describedby="caption-attachment-5312" style="width: 736px" class="wp-caption aligncenter">
<img class="wp-image-5312 size-full" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20736%20488'%3E%3C/svg%3E" alt="Đáp án từ câu 10 đến câu 18" width="736" height="488" data-lazy-src="https://verbalearn.com/wp-content/uploads/2020/09/2-dap-an-bat-chu-10-18.png">
<noscript>
<img class="wp-image-5312 size-full" src="https://verbalearn.com/wp-content/uploads/2020/09/2-dap-an-bat-chu-10-18.png" alt="Đáp án từ câu 10 đến câu 18" width="736" height="488"></noscript>
<figcaption id="caption-attachment-5312" class="wp-caption-text">Đáp án từ câu 10 đến câu 18</figcaption>
</figure>

或者在还未点击elements里面的图片元素时，也可以看到图片链接对应的属性是data-lazy-src，而不是src：

走偏了（纯记录，实际解决方式根本该没必要分析SVG反爬虫😂）：一番搜索之后，从"data:image/svg+xml,%3Csvg%20xmlns=‘http://www.w3.org/2000/svg’%20viewBox=‘0%200%20750%20490’%3E%3C/svg%3E"得知图片是svg+xml形式的，以为是svg反爬，这里还了解了下svg的原理，但是没有找到解决方式，有序有空再了解：
svg是一种反爬措施：SVG反爬虫不同于字体反爬虫，它巧妙的利用css 与 svg的关系，将字符映射到网页中，看起来虽然正常，但是却抓取不到有效内容。
SVG是一种基于xml用于描述矢量图的图形格式，由于矢量图放大或缩写都不会影响图形的质量，所以被较多的应用在web站点与APP中，常见的存在形式是图标。