YarnUrlStuff

Author: Intermentality

package.json

@@ -10,10 +10,12 @@
         "resize-toolbox-images": "node ./bin/resize-toolbox-images.mjs"
     },
     "dependencies": {
+        "path": "^0.12.7",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-router-dom": "^6.27.0",
-        "shadertoy-react": "^1.1.2"
+        "shadertoy-react": "^1.1.2",
+        "url": "^0.11.4"
     },
     "devDependencies": {
         "@monaco-editor/react": "^4.3.1",

src/Pages/ProjectsPage/PGASGame.tsx

@@ -1,16 +1,11 @@
 import { Paragraph } from "../../Components/Paragraph";
 
-import LevelsSS from "../../assets/PGAS24_LevelsSS.png";
-import MainMenuSS from "../../assets/PGAS24_MainMenuSS.png";
-import PowerupSS from "../../assets/PGAS24_PowerupSS.png";
-import WarningSS from "../../assets/PGAS24_WarningSS.png";
+import LevelsSS from "@assets/PGAS24_LevelsSS.png";
+import MainMenuSS from "@assets/PGAS24_MainMenuSS.png";
+import PowerupSS from "@assets/PGAS24_PowerupSS.png";
+import WarningSS from "@assets/PGAS24_WarningSS.png";
 
 export default function PGASGame(){
-    function getImageUrl(file: string) {
-        // note that this does not include files in subdirectories
-        return new URL(`${file}`, import.meta.url).href
-    }
-
     return <div className="relative grid place-items-center">
         <article className="my-4 p-2 w-full max-w-sm md:max-w-2xl">
             <h1 className="text-4xl">PGAS-Game</h1>
@@ -40,10 +35,10 @@ export default function PGASGame(){
 
             <h2 className="text-xl">Images</h2>
             <div className="grid gap-1 grid-cols-1 md:grid-cols-2">
-                    <img src={getImageUrl(LevelsSS)} alt="LevelSS.png"/>
-                    <img src={getImageUrl(MainMenuSS)} alt="MainMenuSS.png"/>
-                    <img src={getImageUrl(PowerupSS)} alt="PowerupSS.png"/>
-                    <img src={getImageUrl(WarningSS)} alt="WarningSS.png"/>
+                    <img src={LevelsSS} alt="LevelSS.png"/>
+                    <img src={MainMenuSS} alt="MainMenuSS.png"/>
+                    <img src={PowerupSS} alt="PowerupSS.png"/>
+                    <img src={WarningSS} alt="WarningSS.png"/>
                 </div>
         </article>
     </div>

vite.config.ts

@@ -1,8 +1,18 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import * as path from "path";
+import { fileURLToPath } from 'url';
+
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
   assetsInclude: ['**/*.PNG'],
+
+  resolve: {
+    alias: {
+      "@assets": path.resolve(__dirname, "src/assets"),
+    },
+  },
 })