Add util func getAssetImagePath

Author: Fernando-A-Rocha

web/src/pages/Element_tree.mdx

@@ -1,8 +1,7 @@
 import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
-import { getSeeAlsoLinksFromList } from '@src/utils/general';
+import { getSeeAlsoLinksFromList, getAssetImagePath } from '@src/utils/general';
 import SeeAlsoSection from '@src/components/SeeAlsoSection.astro';
 import { Image } from 'astro:assets';
-import treeImage from '@src/assets/images/element_tree.webp';
 
 <StarlightPage frontmatter={{
     template: 'doc',
@@ -15,7 +14,7 @@ If you are familiar with the concept of *trees* in computer-science, this should
 
 All elements that are created within scripts or from .map files are child elements of the resource they belong to. Thus, most elements (except for [players](/player)) exist only within resources and are also destroyed as soon as their resource is stopped.
 
-<Image src={treeImage} alt="Element tree"/>
+<Image src={getAssetImagePath("element_tree.webp")} alt="Element tree"/>
 
 ### Tree elements
 * **root**: This is at the very base of the tree - all elements are children (or descendants) of this element.

web/src/pages/OOP_Introduction.mdx

@@ -1,6 +1,6 @@
 import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
 import { Image } from 'astro:assets';
-import imageDiagram from '@src/assets/images/oop_intro_diagram.png';
+import { getAssetImagePath } from '@src/utils/general';
 import { getSeeAlsoLinksFromList } from '@src/utils/general';
 import SeeAlsoSection from '@src/components/SeeAlsoSection.astro';
 
@@ -48,7 +48,7 @@ Throughout the tutorial when I say *object*, I don't mean `createObject` (unless
 
 Here is a fancy Venn diagram I created to show the simple organisation of classes and elements:
 
-<Image src={imageDiagram} width="600" alt="Diagram"/>
+<Image src={getAssetImagePath("oop_intro_diagram.png")} width="600" alt="Diagram"/>
 
 The functions on the left are sorted to show what kind of category the returned value rests in. We've got Classes, Elements and "Problem children".
 

web/src/pages/index.astro

@@ -1,9 +1,7 @@
 ---
 import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
 import { Image } from 'astro:assets';
-
-// IMAGES
-import image_mtaLogo from '@src/assets/images/mta_logo.png';
+import { getAssetImagePath } from '@src/utils/general';
 
 import { MTA_CURRENT_VERSION } from '@src/content.constants';
 import { Icon } from '@astrojs/starlight/components';
@@ -22,7 +20,7 @@ import { Icon } from '@astrojs/starlight/components';
 }}>
 <div class="mtahero">
     <div class="mtahero_left">
-        <Image src={image_mtaLogo} alt="Multi Theft Auto Logo"/>
+        <Image src={getAssetImagePath("mta_logo.png")} alt="Multi Theft Auto Logo"/>
     </div>
 
     <div class="mtahero_right">

web/src/utils/general.ts

@@ -4,6 +4,17 @@ import { getFunctionsByTypeByCategory } from '@src/utils/functions';
 import { getEventsByTypeByCategory } from '@src/utils/events';
 import { getElementsByCategory, getElementCategory } from '@src/utils/elements';
 
+import type { ImageMetadata } from 'astro';
+
+const imagesFromAssets = import.meta.glob<{ default: ImageMetadata }>('/src/assets/images/*.{jpeg,jpg,png,gif,webp}');
+export function getAssetImagePath(imageFilename: string): any {
+  const imagePath = `/src/assets/images/${imageFilename}`;
+  if (imagesFromAssets[imagePath]) {
+    return imagesFromAssets[imagePath]();
+  } else {
+    throw new Error(`Image not found: ${imageFilename}`);
+  }
+}
 
 export function renderInlineMarkdown(markdown: string): string | Promise<string> {
   const html = marked.parseInline(markdown);