Merge pull request #2 from sanjeetkumaritoutlook/stencil-web-app

Stencil web app

Author: sanjeetkumaritoutlook-user

src/assets/images/Sanjeet-Kumar-profile.jpeg

@@ -9,7 +9,19 @@ export namespace Components {
     interface AppHomePage {
     }
     interface AppProfilePage {
+        /**
+          * Alternate text for the image
+         */
+        "alt": string;
+        /**
+          * Image height (e.g., "100px" or "auto")
+         */
+        "height": string;
         "name": string;
+        /**
+          * Image width (e.g., "200px" or "100%")
+         */
+        "width": string;
     }
     interface AppRoot {
     }
@@ -70,7 +82,19 @@ declare namespace LocalJSX {
     interface AppHomePage {
     }
     interface AppProfilePage {
+        /**
+          * Alternate text for the image
+         */
+        "alt"?: string;
+        /**
+          * Image height (e.g., "100px" or "auto")
+         */
+        "height"?: string;
         "name"?: string;
+        /**
+          * Image width (e.g., "200px" or "100%")
+         */
+        "width"?: string;
     }
     interface AppRoot {
     }

src/components.d.ts

@@ -20,7 +20,7 @@ export class AppHome {
         <a href="/posts-dashboard">Posts dashboard</a>
         </div>
         <button
-          onClick={() => Router.push('/profile/stencil')}
+          onClick={() => Router.push('/profile/sanjeet')}
         >
           Profile Page
         </button>

src/components/app-home-page/app-home-page.tsx

@@ -8,6 +8,21 @@ import { Component, Prop, h } from '@stencil/core';
 export class AppProfile {
   @Prop() name: string;
 
+/**
+ * Alternate text for the image
+ */
+@Prop() alt: string = 'Sanjeet Kumar';
+ /**
+   * Image width (e.g., "200px" or "100%")
+   */
+ @Prop() width: string = '100px';
+
+ /**
+  * Image height (e.g., "100px" or "auto")
+  */
+ @Prop() height: string = '100px';
+
+
   normalize(name: string): string {
     if (name) {
       return name.substr(0, 1).toUpperCase() + name.substr(1).toLowerCase();
@@ -16,10 +31,23 @@ export class AppProfile {
   }
 
   render() {
-    debugger;
+    // debugger;
+    // Use the import.meta.url feature to dynamically resolve the image path during runtime:
+   // Dynamically resolve the path to the image file
+   const imagePath = new URL('../../assets/images/Sanjeet-Kumar-profile.jpeg', import.meta.url).href;
+
     if (this.name) {
       return (
         <div class="app-profile-page">
+           <img 
+            src={imagePath}
+            alt={this.alt} 
+            style={{
+              width: this.width,
+              height: this.height,
+            }}
+            loading="lazy"
+        />
           <p>Hello! My name is {this.normalize(this.name)}. My name was passed in through a route param!</p>
         </div>
       );

src/components/app-profile-page/app-profile-page.tsx

@@ -10,7 +10,7 @@ export class HeaderNavigation {
     return (
       <header>
       <nav>
-        <a href="/profile/stencil" class="nav-link" >Profile</a>
+        <a href="/profile/sanjeet" class="nav-link" >Profile</a>
         <a href="/web-components" class="nav-link" >StencilJS components</a>
         <a href="/posts-dashboard" class="nav-link">Posts Dashboard</a>
       </nav>