typescript - Electron Forge projesinde yerel varlıklar nasıl kullanılır?

Şu anda bir test masaüstü uygulaması geliştirmek için Electron Forge kullanıyorum.

Projemde bulunan bir resmi, örneğin ./src/assets/images/main.png içine kullanmak istiyorum. Bu resmi bir <img /> etiketi kullanarak import etmeyi denedim ama çalışmıyor.

• Typescript şablonu kullanıyorum
• React TypeScript kullanıyorum

Aşağıdaki kod basit masaüstü uygulamamı temsil ediyor.

import React from "react";
import { Typography, Image } from "antd";

const { Title, Text } = Typography;

const Index: React.FC = () => {
  return (
    <div className="w-full flex flex-col justify-center gap-4">
      <Title className="text-center font-bold">Bienvenido</Title>
      <Text className="text-center text-sm">
        💡 Utiliza <Text keyboard>ctrl</Text>+<Text keyboard>k</Text> para abrir
        el menú de herramientas disponibles
      </Text>
      <Image src="../static/main.gif" width={300} />
    </div>
  );
};

export default Index;

Gördüğünüz gibi <Image src="../static/main.gif" width={300} /> çalışmıyor ve aşağıdaki hatayı tetikliyor:

İnternette bazı örnekleri aramaya çalıştım ama bunu nasıl yapacağım konusunda net değilim.

Yardımınız için teşekkür ederim.