Need to create proxy for images for Cypress tests

Question

I faced a problem with replacement some requests to external images by external URL that called from browsers to images from the static folder. Let's say that the idea to upload specific images(by a mask) from the local folder. The idea that my images are being loaded ages due to there are a lot of them that's why I want to mock many requests to these images to only one image.

I created regex for that and the main problem is to wait for the response. I can't get a result and my tests were broken on that stage of waiting for a response. Requests to images are triggered by frontend that means by browser

beforeEach(() => {
const BASE_URL = 'http://localhost:8080'
cy.fixture(FIXTURES_FOLTER.imagePath).as('image')
cy
        .server()
        .route({
          method: 'GET',
          response: '@image',
          status: 200,
          url: new RegExp(/https?:\/\/(www\.)?shutterstock\.com\/image-photo/),
        })
        .as('images')

      cy.visit(`${ BASE_URL }`)

      cy.wait('@images')
    })

Answer 1

https://docs.cypress.io/api/commands/fixture.html#Images

It looks like you might have to do something like:

cy.fixture(FIXTURES_FOLTER.imagePath).then(base64Image => {
  cy.route({
  method: 'GET',
      response: base64Image,
      status: 200,
      url: new RegExp(/https?:\/\/(www\.)?shutterstock\.com\/image-photo/),
    })
 })