prefix for images

Author: gugu

frontend/src/app/components/ui-components/record-edit-fields/image/image.component.html

@@ -1,12 +1,14 @@
 <div class="image-box">
     <mat-form-field class="image-box__url" appearance="outline">
         <mat-label>{{normalizedLabel}}</mat-label>
+        <span *ngIf="prefix" matTextPrefix>{{prefix}}</span>
         <input matInput type="text" name="{{label}}-{{key}}" #image="ngModel"
             [required]="required" [disabled]="disabled" [readonly]="readonly"
             urlValidator
+            [urlPrefix]="prefix"
             attr.data-testid="record-{{label}}-image"
             [(ngModel)]="value" (ngModelChange)="onFieldChange.emit($event)">
             <mat-error *ngIf="image.errors?.isInvalidURL">URL is invalid.</mat-error>
     </mat-form-field>
-    <img *ngIf="!image.errors?.isInvalidURL" [src]="value" class="image-box__image">
+    <img *ngIf="!image.errors?.isInvalidURL" [src]="imageUrl" class="image-box__image">
 </div>

frontend/src/app/components/ui-components/record-edit-fields/image/image.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 
 import { BaseEditFieldComponent } from '../base-row-field/base-row-field.component';
 import { CommonModule } from '@angular/common';
@@ -19,6 +19,37 @@ import { UrlValidatorDirective } from 'src/app/directives/url-validator.directiv
     UrlValidatorDirective
   ]
 })
-export class ImageEditComponent extends BaseEditFieldComponent {
+export class ImageEditComponent extends BaseEditFieldComponent implements OnInit {
   @Input() value: string;
+  public prefix: string = '';
+
+  ngOnInit(): void {
+    super.ngOnInit();
+    this._parseWidgetParams();
+  }
+
+  ngOnChanges(): void {
+    this._parseWidgetParams();
+  }
+
+  private _parseWidgetParams(): void {
+    if (this.widgetStructure?.widget_params) {
+      try {
+        const params = typeof this.widgetStructure.widget_params === 'string' 
+          ? JSON.parse(this.widgetStructure.widget_params) 
+          : this.widgetStructure.widget_params;
+        
+        if (params.prefix !== undefined) {
+          this.prefix = params.prefix || '';
+        }
+      } catch (e) {
+        console.error('Error parsing Image widget params:', e);
+      }
+    }
+  }
+
+  get imageUrl(): string {
+    if (!this.value) return '';
+    return this.prefix + this.value;
+  }
 }

frontend/src/app/components/ui-components/record-view-fields/image/image.component.html

@@ -1,5 +1,5 @@
 <span *ngIf="!isUrl" class="field-view-value">[Image URL]</span>
 <img *ngIf="isUrl"
   class="image-preview"
-  [src]="value" alt="Image">
+  [src]="srcValue" alt="Image">
 <span class="field-view-value">{{value || '—'}}</span>

frontend/src/app/components/ui-components/record-view-fields/image/image.component.ts

@@ -10,10 +10,17 @@ import { Component, Injectable } from '@angular/core';
   imports: [CommonModule]
 })
 export class ImageRecordViewComponent extends BaseRecordViewFieldComponent {
+  get srcValue(): string {
+    if (!this.value) return '';
+    const prefix = this.widgetStructure?.widget_params?.prefix || '';
+    return prefix + this.value;
+  }
+  
   get isUrl(): boolean {
     if (!this.value) return false;
     try {
-      new URL(this.value);
+      // Check if the prefixed URL is valid
+      new URL(this.srcValue);
       return true;
     } catch {
       return false;

frontend/src/app/components/ui-components/table-display-fields/image/image.component.html

@@ -7,7 +7,7 @@
   <button type="button" mat-icon-button
       class="field-copy-button"
       matTooltip="Copy image URL"
-      [cdkCopyToClipboard]="value"
+      [cdkCopyToClipboard]="srcValue"
       (cdkCopyToClipboardCopied)="onCopyToClipboard.emit('Field value was copied to clipboard.')"
       (click)="$event.stopPropagation()">
       <mat-icon>content_copy</mat-icon>