title: How to mock the image response in cypress
body: <h3>My problem</h3>
  <p>I'm trying to simulate a response from the server containing an image with <code>cy.intercept</code> however, the browser <strong>won't display</strong> my mocked image. The browser just can't interpret my response as a proper image for <code>&lt;img&gt;</code> tag.</p>
  <p><a href="https://i.stack.imgur.com/Phb27.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Phb27.png" alt="debug tools screenshot" /></a></p>
  <p>I can still copy the response in debug tools and it seems to be the image I need but probably encoded in the wrong way.</p>
  <h3>My approach</h3>
  <pre><code>    cy.readFile('src/assets/logo.png', 'binary').then((imgContent) =&gt; {
        cy.intercept('/uploads/test.png', {
          headers: { 'Content-Type': 'image/jpg' },
          body: imgContent,
        })
      });
  </code></pre>
  <p>I've also tried to return base64 image string like this:</p>
  <pre><code>    cy.intercept(
        '/uploads/test.png',
        {
          headers: {&quot;Content-Type&quot;: &quot;image/jpg&quot;},
          body:
        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAARCUlEQVR4Xu1deXQURRr...
  </code></pre>
  <p>But it didn't work as well.</p>