Solid.js component throwing 404 error for images

Question

I'm trying to create a component that uses images based on prop data, however I have ran into this issue that for some reason throws a 404 error trying to load the image.

This is the error shown in console of the browser. (Ignore the favicon error as I just haven't inserted one yet) Console Error

Here is the relevant code of the component. (portions excluded that is known not to cause issue.

import { Show, For } from 'solid-js';

import "@styles/components/_creatureCard.scss";


export default (props: any) => {
    const creature = props.creature;


    return (
    <div class="creatureCard" id={creature.Name + "_Card"}>
        <div class="creatureCard__header">
            <h1 class="creatureCard__header__name">{creature.Name}</h1>
            <img src="../assets/creatureCardImages/Creaturecard_Antlion.png"/>
        </div>
    </div>
    )
}

Here is how to component is integrated.

import { For } from 'solid-js';
import creatures from "@assets/data/creatures.json";

import CreatureCard from "@components/creatureCard";

export default function Creatures() {
    return (
        <div>
            <For each={creatures}>
            {(creature) =>
                <CreatureCard creature={creature} />
            }
            </For>
        </div>
    )
}

Finally the App.tsx

import { Component } from 'solid-js';
import { Routes, Route } from "@solidjs/router";

import Home from '@pages/Home';
import Error from '@pages/Error';
import Creatures from '@pages/Creatures';

import '@styles/_global.scss'
import '@/App.scss';



const App: Component = () => {


  return (
    <div>
      <h1>Far's Grounded Virtual Tool</h1>

      <Routes>
        <Route path="/" component={Home}/>
        <Route path="/creatures" component={Creatures}/>
        <Route path="/*all" component={Error}/>
      </Routes>
    </div>
  );
};

export default App;

Also a screenshot to show where the images are. Screenshot of assets

I attempted to implement lazy loading the image, the component, and even the page itself, all to the same result. I have imported the image using @import, and that works, however, I can't do that as I need the directory to be dynamic as I use the directory from imported data, and can't simply hardcode the import.

This is what worked but isn't viable for my application.

import { Show, For } from 'solid-js';

import "@styles/components/_creatureCard.scss";
import image from "@assets/creatureCardImages/Creaturecard_Antlion.png"


export default (props: any) => {
    const creature = props.creature;


    return (
    <div class="creatureCard" id={creature.Name + "_Card"}>
        <div class="creatureCard__header">
            <h1 class="creatureCard__header__name">{creature.Name}</h1>
            <img src={image}/>
        </div>
    </div>
    )
}