React Typescript local image not loading through props

I'm quite new to Typescript and am trying to build it into my react website. Seems like I can't load an image through my props? Can you tell me why?

I'm loading my content through an array that looks like this:

const projectsArray: readonly { id: number, name: string, short: string, description: string, imgUrl: string }[] = [
{
    id: 1,
    name: "Dinosource",
    short: "Digital Agency IMD",
    description: "Let's find out what this project is about",
    imgUrl: "../../public/testimg.jpeg",
},
{
    id: 2,
    name: "Kraakkwartier",
    short: "Podcast jeugd-cultuur",
    description: "Let's find out what this project is about",
    imgUrl: "../../public/testimg.jpeg",
}] export default projectsArray;

The array is loaded into my component, and shown using the map() function. All props are passed through except for my image, even though the relative file path seems to be okay. Am I missing something here?

import styles from "../styles/projects.module.css"
import projects from "../data/projectsArray"

interface ProjectProps {
    id: number;
    name: string;
    short: string;
    description: string;
    imgUrl: string;
}

function createProject({id, name, short, description, imgUrl}: ProjectProps){
    return (
        <article key={id} className={styles.projectCard}>
            <h1 className={styles.projectTitle}>{name}</h1>
            <p className={styles.projectDescription}>{short}</p>
            <img className={styles.projectImage} width={100} height={100} src={imgUrl} alt={name} />
            <p className={styles.projectDescription}>{description}</p>
        </article>
            )
}

export default function Projects() {

    return (
        <section className={styles.sectionProjects}>
            <h2><span>My Favourite </span>Projects</h2>
            <div className={styles.projectContainer} >
              {projects.map(createProject)}
            </div>
        </section>
    )
}

Ideas I have about the mistake:

• Does the file path have to be relative to the array file or the component file (which are in different folders)?
• Probably just overseeing typescript mistakes here.

Also, if you have tips or notice major mistakes in my novice typescript writing, I'm open for feedback :P

First, you need to import image to use in img element

import imgName from '../../public/testimg.jpeg

then put it in img

<img src={imgName} />

If you are using nextjs, I recommend using Image component.