用 Scrapy 获取 img src 会得到奇怪的结果，为什么？

Question

我正在尝试使用 Scrapy 1.4.0 进行网络抓取 https://celulares.mercadolibre.com.ar/。我想要获得的是一个列表，其中包含产品描述以及该产品的 img src。问题是，当我运行我的蜘蛛时，它 return 只是前 4 个项目（描述 + 相应的 img src），而项目列表的其余部分只是带有“none" img 源。通过分析网页源代码，我可以看出前 5 个项目与其余项目之间的唯一区别是第一个项目的 class 属性称为“延迟加载”，而其他项目有一个特殊的 id，如“ML2178321”。但是考虑到我没有在蜘蛛代码中引用 class 名称，我不明白为什么最后一项的行为会发生变化。我怀疑一些我不知道的 JQuery/JS 事情。这是第一个项目容器的代码：

<div class="image-content">

 <a href="https://articulo.mercadolibre.com.ar/MLA-644049024-samsung-galaxy-j7-prime-lector-de-huella16gb3gb-ram-_JM" class="figure item-image item__js-link"> 
 
 <img alt="Samsung Galaxy J7 Prime Lector De Huella+16gb+3gb Ram" src="https://http2.mlstatic.com/samsung-celulares-smartphones-D_Q_NP_771296-MLA25977210113_092017-X.jpg" class="lazy-load" srcset="https://http2.mlstatic.com/samsung-celulares-smartphones-D_Q_NP_771296-MLA25977210113_092017-X.jpg 1x, https://http2.mlstatic.com/samsung-celulares-smartphones-D_NQ_NP_771296-MLA25977210113_092017-V.jpg 2x" width="160" height="160"> 
 
 </a> 

</div>

这里是来自后面图像之一的容器代码（return“None”img src）：

 <div class="image-content">
 
 <a href="https://articulo.mercadolibre.com.ar/MLA-643729195-motorola-moto-g4-4ta-gen-4g-lte-16gb-ram-2gb-libre-gtia-_JM" class="figure item-image item__js-link"> 
 
 <img alt="Motorola Moto G4 4ta Gen 4g Lte 16gb Ram 2gb Libre Gtia" id="MLA643729195-I" srcset="https://http2.mlstatic.com/motorola-celulares-smartphones-D_Q_NP_765168-MLA26028117832_092017-X.jpg 1x, https://http2.mlstatic.com/motorola-celulares-smartphones-D_NQ_NP_765168-MLA26028117832_092017-V.jpg 2x" src="https://http2.mlstatic.com/motorola-celulares-smartphones-D_Q_NP_765168-MLA26028117832_092017-X.jpg" width="160" height="160"> 
 
 </a> 
 
 </div>

最后，这是我运行ning

的代码

import scrapy
import time

class MlarSpider(scrapy.Spider):
name = "mlar"
allowed_domains = ["mercadolibre.com.ar"]
start_urls = ['https://celulares.mercadolibre.com.ar/']

def parse(self, response):
    SET_SELECTOR = '.results-item'
    for item in response.css(SET_SELECTOR):

        PRODUCTO_SELECTOR = '.item__info-title span ::text'
        IMAGEN_SELECTOR = '.image-content a img'

        yield {
            'producto': item.css(PRODUCTO_SELECTOR).extract_first(),
            'imagen': item.css(IMAGEN_SELECTOR).xpath("@src").extract_first(),
        }

    NEXT_PAGE_SELECTOR = '.pagination__next a::attr(href)'
    next_page = response.css(NEXT_PAGE_SELECTOR).extract_first()
    if next_page:
        yield scrapy.Request(
            response.urljoin(next_page),
            callback=self.parse
        )

我已经实现了 Barmar 评论并且让它运行得非常棒。刚刚将此行添加到我的蜘蛛：

        IXPATH= '@src'
        if item.css(IMAGEN_SELECTOR).xpath(IXPATH).extract_first() is None:
            IXPATH = '@data-src'
        yield {
            'producto': item.css(PRODUCTO_SELECTOR).extract_first(),
            'imagen': item.css(IMAGEN_SELECTOR).xpath(IXPATH).extract_first(),
        }

Answer 1

后面的图像中没有 src 属性。这是该图片的代码：

<img width='160' height='160' alt='Motorola Moto G4 4ta Gen 4g Lte 16gb Ram 2gb Libre Gtia' id='MLA643729195-I' class='loading' title='https://http2.mlstatic.com/motorola-celulares-smartphones-D_Q_NP_765168-MLA26028117832_092017-X.webp' data-src='https://http2.mlstatic.com/motorola-celulares-smartphones-D_Q_NP_765168-MLA26028117832_092017-X.webp' data-srcset='https://http2.mlstatic.com/motorola-celulares-smartphones-D_Q_NP_765168-MLA26028117832_092017-X.webp 1x, https://http2.mlstatic.com/motorola-celulares-smartphones-D_NQ_NP_765168-MLA26028117832_092017-V.webp 2x' />

图像 URL 在 data-src 属性中，而不是 src。

该站点正在使用延迟加载插件，该插件在设置 src 之前等待用户将图像滚动到视口中。那时它将 data-src 属性复制到 src。您发布的内容显然是 DOM 元素在这发生之后，而不是 HTML 原始来源，这是 scrapy 看到的。

如果找不到 src 属性，您可以简单地更改脚本以查找 data-src 属性。

用 Scrapy 获取 img src 会得到奇怪的结果，为什么？

Getting img src with Scrapy gets weird results, why?

python

src

scrapy