使用Scrapy爬取特色图片返回SVG数据而非图片Src的问题求助

原因解释 #

你拿到的data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20600%20400'%2F%3E是懒加载占位SVG。网站为优化加载速度，初始加载时不会把真实图片地址放在src属性里，而是用这个空SVG占位，等页面滚动到图片位置或满足加载条件时，再通过JS把真实地址替换到src中。真实图片地址通常存在data-src这类自定义属性里。

解决方案 #

查看目标网站的图片标签，真实地址存在data-src属性中，修改Scrapy代码，将获取src改为获取data-src即可：

class NewsSpider(scrapy.Spider):
    name = "cruiseradio"

    def start_requests(self):
        url = input("Enter the article url: ")
        yield scrapy.Request(url, callback=self.parse_dir_contents)

    def parse_dir_contents(self, response):
        try:
            # 替换为获取data-src属性
            Feature_Image = [i.strip() for i in response.css('img[class*="wp-image-150660 sp-no-webp"] ::attr(data-src)').getall()][0]
        except IndexError:
            # 统一处理Feature_Image默认值，避免原代码中变量未使用的问题
            Feature_Image = "NULL"
        yield{
            'Feature_Image': Feature_Image,
        }

补充说明 #

• 后续遇到类似懒加载图片，先打开浏览器开发者工具的Elements面板，查看img标签的自定义属性（通常带data-前缀），真实地址大概率存放在这些属性里。
• 若网站用了更复杂的JS渲染懒加载逻辑，可考虑使用Scrapy的Splash插件或Playwright工具来渲染JS加载后的页面。

内容的提问来源于stack exchange，提问作者Info Rewind