CODEWITHSUNDEEP
javascriptnode.jsweb-scrapingpuppeteer
Hatem Husam
Hatem Husam

Reputation: 187

Get Image src with specific class in puppeteer

I have the following code, where I store all src in an array, I would like to store only img with class name xyz

const imgs = await page.$$eval('img[src]', imgs => imgs.map(img => img.getAttribute('src')));

I tried to user filter, but I couldn't reach the right syntax to do that.

Upvotes: 9

Views: 21459

Answers (5)

Havid
Havid

Reputation: 51

if you want dynamic attribute

<div class="latest-photos">
<img src="/LogoImage.ashx?sn=14376&imgNbr=0" id="ctl00_ctl00_ctl00_cphMain_cphMiddle_cphCenterColumn_uctDiveInfoDisplay_img1" alt="OptionalI Image 1" width="170" style="vertical-align: top;" />
<img src="/LogoImage.ashx?sn=14376&imgNbr=1" id="ctl00_ctl00_ctl00_cphMain_cphMiddle_cphCenterColumn_uctDiveInfoDisplay_img2" alt="OptionalI Image 2" width="170" style="vertical-align: top;" />
<img src="/LogoImage.ashx?sn=14376&imgNbr=2" id="ctl00_ctl00_ctl00_cphMain_cphMiddle_cphCenterColumn_uctDiveInfoDisplay_img3" alt="Option alI Image 3" width="170" style="vertical-align: top;" />
</div>


const attr = "src";
const imgs = await page.$$eval('.latest-photos img[src]', (imgs, value) => imgs.map(img => img.getAttribute(value)), attr);

Upvotes: 0

Youssof. K.
Youssof. K.

Reputation: 15

You can use this:

async function scrapeProduct(url){
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(url);

const [el] = await page.$x('//*[@id="content"]/div/div[2]/div/div[2]/div[1]/div/div/div/span');
const src = await el.getProperty('src');
const image = await src.jsonValue();

console.log({image});

browser.close();

}

    scrapeProduct('https://soundcloud.com/sudo_normi_music/shibuya-drift');

Upvotes: 1

Ben Smith
Ben Smith

Reputation: 531

If you want to get all the SRC addresses inside of a class latest-photos:

<div class="latest-photos">

    <img src="/LogoImage.ashx?sn=14376&imgNbr=0" id="ctl00_ctl00_ctl00_cphMain_cphMiddle_cphCenterColumn_uctDiveInfoDisplay_img1" alt="OptionalI Image 1" width="170" style="vertical-align: top;" />
    <img src="/LogoImage.ashx?sn=14376&imgNbr=1" id="ctl00_ctl00_ctl00_cphMain_cphMiddle_cphCenterColumn_uctDiveInfoDisplay_img2" alt="OptionalI Image 2" width="170" style="vertical-align: top;" />
    <img src="/LogoImage.ashx?sn=14376&imgNbr=2" id="ctl00_ctl00_ctl00_cphMain_cphMiddle_cphCenterColumn_uctDiveInfoDisplay_img3" alt="Option
    
    alI Image 3" width="170" style="vertical-align: top;" />
</div>

You use:

const imgs = await page.$$eval('.latest-photos img[src]', imgs => imgs.map(img => img.getAttribute('src')));

Upvotes: 6

saeid abdi
saeid abdi

Reputation: 55

You can use this:

    const imgaes = await page.$$eval('img', anchors => [].map.call(anchors, img => img.src));

Upvotes: 1

CertainPerformance
CertainPerformance

Reputation: 370979

Just add .xyz to your query string:

const imgs = await page.$$eval('img.xyz[src]', imgs => imgs.map(img => img.getAttribute('src')));

Upvotes: 16

Related Questions