修复图片路径问题

zhouhua · Mar 18, 2024 · 7229be6 · 7229be6
1 parent 6089b57
commit 7229be6
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -100,7 +100,7 @@ We expand the markdown code block syntax, defining `media-card` as the identifie
 | type         |   Yes    | string | Type, currently supports `movie`, `music`, `book`                                                                                  |
 | url          |    No    | string | Link the card redirects to, e.g., Douban introduction page or music playback page. If not set, clicking the card will not redirect |
 | title        |   Yes    | string | Media name (book title, music title, movie title, etc.)                                                                            |
-| cover        |   Yes    | string | Cover image                                                                                                                        |
+| cover        |   Yes    | string | Cover image, web url(https://...) and obsidian vault path(../folder/xx.jpg or folder/xx.jpg) are supported                         |
 | introduction |    No    | string | Introduction, can be multi-line text, but only the first 3 lines will be displayed on the card                                     |
 | width        |    No    | number | Card width in pixels, defaults to full width if not set                                                                            |
 

diff --git a/main.ts b/main.ts
@@ -32,25 +32,48 @@ function appendErrorMsg(el: HTMLElement) {
 	}
 }
 
+async function calcImageUrl(path: string, sourcePath: string) {
+	try {
+		const div = createDiv();
+		await MarkdownRenderer.render(
+			this.app,
+			`![](${path})`,
+			div,
+			sourcePath,
+			new MarkdownRenderChild(div)
+		);
+		return div.find("img").getAttribute("src");
+	} catch (e) {
+		return path;
+	}
+}
+
 export default class MediaCardPlugin extends Plugin {
 	async onload() {
-		this.registerMarkdownCodeBlockProcessor("media-card", (source, el, ctx) => {
-			el.addClass("markdown-media-card-render");
-			try {
-				const html = template(parseYaml(source));
-				const fragment = sanitizeHTMLToDom(html);
-				el.appendChild(fragment);
-			} catch (e) {
-				MarkdownRenderer.render(
-					this.app,
-					["```yaml", source, "```"].join("\n"),
-					el,
-					ctx.sourcePath,
-					new MarkdownRenderChild(el)
-				);
-				appendErrorMsg(el);
+		this.registerMarkdownCodeBlockProcessor(
+			"media-card",
+			async (source, el, ctx) => {
+				el.addClass("markdown-media-card-render");
+				try {
+					const data = parseYaml(source);
+					if (data.cover) {
+						data.cover = await calcImageUrl(data.cover, ctx.sourcePath);
+					}
+					const html = template(data);
+					const fragment = sanitizeHTMLToDom(html);
+					el.appendChild(fragment);
+				} catch (e) {
+					MarkdownRenderer.render(
+						this.app,
+						["```yaml", source, "```"].join("\n"),
+						el,
+						ctx.sourcePath,
+						new MarkdownRenderChild(el)
+					);
+					appendErrorMsg(el);
+				}
 			}
-		});
+		);
 	}
 
 	onunload() {}