Scrapyでimg srcを取得すると、奇妙な結果が得られます。なぜですか？

Question

私はScrap 1.4.0でウェブスクラップhttps://celulares.mercadolibre.com.ar/をしようとしています。入手したいのは、製品の説明とその製品のimg srcというリストです。 問題は、私がスパイダーを実行したときに、最初の4つのアイテム（説明+対応するimg src）を返すだけで、アイテムリストの残りは「なし」img srcの説明に過ぎないということです。 ウェブページのソースコードを分析することで、最初の5項目とそれ以外の唯一の違いは、最初の項目の属性を「遅延ロード」と呼びますが、他の項目は「ML2178321」 。 しかし、スパイダーコードのクラス名を参照していないと考えると、この最後の項目で動作が変わる理由はわかりません。 私が気づいていない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>

そして、ここでは、後の画像の1（「なし」の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>

最後に、ここで私は

を実行しているコードがあります

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属性を探してください。