fix #476

Author: mProjectsCode

exampleVault/View Fields/View Field.md

@@ -21,6 +21,7 @@ images:
 otherImages:
   - "[[Other/Images/img_flower.webp]]"
   - "[image](Other/Images/img_flower.webp)"
+remoteImage: https://picsum.photos/200/300
 ---
 
 `INPUT[number:number1]`
@@ -60,20 +61,32 @@ Self Loop Error: `VIEW[**{computed}**][text():computed]`
 link with render markdown: `VIEW[\[\[{file}|link\]\]][text(renderMarkdown)]`
 link with link view field: `VIEW[{file}|this is a link][link]`
 
+## Images
+
+A single image works
+
 ```meta-bind
 INPUT[imageSuggester(optionQuery("Other/Images")):image]
 ```
 
 `VIEW[{image}][image]`
 
+View fields can also display a list of images.
+
 ```meta-bind
 INPUT[imageListSuggester(optionQuery("Other/Images")):images]
 ```
 
 `VIEW[{images}][image]`
 
+Both markdown link types are supported.
+
 `VIEW[{otherImages}][image]`
 
+External images work as well.
+
+`VIEW[{remoteImage}][image]`
+
 ## Arrays and Objects
 
 Plain Text:

packages/core/src/fields/viewFields/fields/ImageVF.ts

@@ -88,7 +88,7 @@ export class ImageVF extends AbstractViewField<string> {
 		this.component = mount(ImageGrid, {
 			target: container,
 			props: {
-				images: linkList.map(x => x.target),
+				images: linkList.map(x => ({ link: x.target, internal: x.internal })),
 				plugin: this.mountable.plugin,
 			},
 		});

packages/core/src/utils/components/ImageCard.svelte

@@ -4,12 +4,16 @@
 	const {
 		plugin,
 		image,
+		internal = true,
 	}: {
 		plugin: IPlugin;
 		image: string;
+		internal?: boolean;
 	} = $props();
+
+	let imageUri = $derived(internal ? plugin.internal.imagePathToUri(image) : image);
 </script>
 
 <div class="mb-image-card">
-	<img class="mb-image-card-image" src={plugin.internal.imagePathToUri(image)} alt={image} />
+	<img class="mb-image-card-image" src={imageUri} alt={image} />
 </div>

packages/core/src/utils/components/ImageGrid.svelte

@@ -7,12 +7,12 @@
 		images = [],
 	}: {
 		plugin: IPlugin;
-		images: string[];
+		images: { link: string; internal: boolean }[];
 	} = $props();
 </script>
 
 <div class="mb-image-card-grid">
 	{#each images as image}
-		<ImageCard plugin={plugin} image={image}></ImageCard>
+		<ImageCard plugin={plugin} image={image.link} internal={image.internal}></ImageCard>
 	{/each}
 </div>