how to prevent Chrome headless from loading images

Question

I am running a test in headless chrome and part of it I want to prevent the browser from loading the images on the page, the page must be a data url and not a normal page.
I am using headless chrome with the next start command:
chrome --headless --remote-debugging-port=9222

I had created the next test to demonstrate what I am trying to achieve. but nothing works...

const CDP = require('chrome-remote-interface');
const fs = require('fs');

CDP(async(client) => {
  const {
    Page,
    Network
  } = client;
  try {
    await Page.enable();
    await Network.enable();
    await Network.emulateNetworkConditions({
      offline: true,
      latency: 0,
      downloadThroughput: 0,
      uploadThroughput: 0
    });
    await Page.navigate({
      url: "data:text/html,<h1>The next image should not be loaded</h1><img src='http://via.placeholder.com/350x150'>"
    });
    await Page.loadEventFired();
    const {
      data
    } = await Page.captureScreenshot();
    fs.writeFileSync((+new Date()) + '.png', Buffer.from(data, 'base64'));
  } catch (err) {
    console.error(err);
  } finally {
    await client.close();
  }
}).on('error', (err) => {
  console.error(err);
});

score 27 · Accepted Answer · answered Feb 27 '18 at 17:09

27

You can block images using this flag.
It works on canary and stable.

chrome --headless --remote-debugging-port=9222 --blink-settings=imagesEnabled=false

answered Feb 27 '18 at 17:09

kappatech

479
5
7

Strange thing - with it option on some websites browser can not get css files – Stanislav Belichenko Jul 24 '19 at 10:27

score 19 · Answer 2 · answered May 29 '18 at 12:24

19

With puppeteer you can use the args option for passing the blink-settings argument

const browser = await puppeteer.launch({
    args: [
      '--blink-settings=imagesEnabled=false'
    ]
});

answered May 29 '18 at 12:24

Joyce Babu

19,602
13
62
97

score 1 · Answer 3 · answered Jan 05 '21 at 08:27

If you are using Puppeteer, you can use the code below:

await page.setRequestInterception(true);
page.on('request', (request) => {
    if (request.resourceType() === 'image') request.abort();
    else request.continue();
});

From: https://github.com/puppeteer/puppeteer/blob/main/examples/block-images.js

how to prevent Chrome headless from loading images

3 Answers3