Failed to load resource when the component is with image url

[ZHChen8397]

Hi There, I'm new with cypress and encounter a issue when doing the component test
I have a component "Hero" which the props is as below

type HeroProps = {
  heading: string;
  description: string;
  image: {
    id: string;
    url: string;
    alt?: string;
  };
};

and here's my test

describe('Hero tests', () => {

  const prop = {
    heading: 'test heading',
    description: 'test description',
    image: {
      id: 'test id',
      url: 'a url from datoCMS',
      alt: 'test'
    }
  }

  it('validate heading', () => {
    cy.mount(<Hero {...prop} />);
    cy.getByDataID(selectors.heading)
      .should('have.text', 'Heading for heading test')
      .and('be.visible');
  });
});

the test will pass but when I check the result from UI, I saw that the image can not show and the console shows:

GET http://localhost:8080/assets/cms/xxxx/xxx.png 404 (Not Found)

does anyone know how to fix this issue?