如何在Cypress组件测试中加载fixtures文件夹中的图片？

你之前写的../fixtures/Banner.jpg无效，是因为浏览器环境无法直接访问本地文件系统路径，得用Cypress提供的方式处理，以下是两种可行方案：

方案1：返回Base64格式图片（无需额外拦截） #

这种方式把本地图片转成Base64字符串，作为API响应的url返回，组件的img会直接渲染这个字符串，不用再发起图片请求。

修改后的测试代码：

import React from 'react';
import Logo from '../../src/logo/logo';

const allApiInterceptors = () => {
  // 读取fixture里的图片并转成base64编码
  cy.fixture('Banner.jpg', 'base64').then(base64Data => {
    const imageDataUrl = `data:image/jpeg;base64,${base64Data}`;
    cy.intercept('/logos/123456', {
      id: 5295911,
      url: imageDataUrl
    });
  });
};

describe('Logo', () => {
  beforeEach(() => {
    allApiInterceptors();
  });
  it('mounts and renders local fixture image', () => {
    cy.mount(<Logo />);
    // 可选：验证图片是否正常显示
    cy.get('img').should('be.visible');
  });
});

方案2：拦截图片请求返回Fixture #

如果想保留URL形式，先让API返回一个自定义图片地址，再拦截这个地址的请求，返回本地Fixture：

修改后的测试代码：

import React from 'react';
import Logo from '../../src/logo/logo';

const allApiInterceptors = () => {
  // 1. 拦截API，返回自定义的图片URL
  cy.intercept('/logos/123456', {
    id: 5295911,
    url: '/mock-logo.jpg'
  });

  // 2. 拦截自定义URL的请求，返回本地fixture图片
  cy.intercept('GET', '/mock-logo.jpg', {
    fixture: 'Banner.jpg'
  });
};

describe('Logo', () => {
  beforeEach(() => {
    allApiInterceptors();
  });
  it('mounts and renders local fixture image', () => {
    cy.mount(<Logo />);
    cy.get('img').should('have.attr', 'src', '/mock-logo.jpg');
    cy.get('img').should('be.visible');
  });
});

两种方案按需选择：方案1更直接，无需额外处理图片请求；方案2更贴近真实场景的URL模式。

内容的提问来源于stack exchange，提问作者Dorian Fabre