fix: 修复md文件中图片不显示的问题
This commit is contained in:
parent
4809b8da0f
commit
2f9e682445
|
|
@ -33,7 +33,7 @@ import { DropdownSelector } from "@/components/ui/dropdown-selector";
|
||||||
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
|
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
|
||||||
import { CodeEditor } from "@/components/workspace/code-editor";
|
import { CodeEditor } from "@/components/workspace/code-editor";
|
||||||
import { useArtifactContent } from "@/core/artifacts/hooks";
|
import { useArtifactContent } from "@/core/artifacts/hooks";
|
||||||
import { urlOfArtifact } from "@/core/artifacts/utils";
|
import { resolveArtifactURL, urlOfArtifact } from "@/core/artifacts/utils";
|
||||||
import { useI18n } from "@/core/i18n/hooks";
|
import { useI18n } from "@/core/i18n/hooks";
|
||||||
import { streamdownPlugins } from "@/core/streamdown";
|
import { streamdownPlugins } from "@/core/streamdown";
|
||||||
import { checkCodeFile, getFileName } from "@/core/utils/files";
|
import { checkCodeFile, getFileName } from "@/core/utils/files";
|
||||||
|
|
@ -474,6 +474,7 @@ export function ArtifactFileDetail({
|
||||||
content={displayContent}
|
content={displayContent}
|
||||||
language={language ?? "text"}
|
language={language ?? "text"}
|
||||||
zoom={zoom}
|
zoom={zoom}
|
||||||
|
threadId={threadId}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
)}
|
)}
|
||||||
|
|
@ -505,12 +506,17 @@ export function ArtifactFilePreview({
|
||||||
content,
|
content,
|
||||||
language,
|
language,
|
||||||
zoom = 100,
|
zoom = 100,
|
||||||
|
threadId,
|
||||||
}: {
|
}: {
|
||||||
content: string;
|
content: string;
|
||||||
language: string;
|
language: string;
|
||||||
zoom?: number;
|
zoom?: number;
|
||||||
|
threadId?: string;
|
||||||
}) {
|
}) {
|
||||||
const zoomScale = zoom / 100;
|
const zoomScale = zoom / 100;
|
||||||
|
const normalizedContent = useMemo(() => {
|
||||||
|
return rewriteArtifactImagePaths(content ?? "", threadId);
|
||||||
|
}, [content, threadId]);
|
||||||
|
|
||||||
if (language === "markdown") {
|
if (language === "markdown") {
|
||||||
return (
|
return (
|
||||||
|
|
@ -523,7 +529,7 @@ export function ArtifactFilePreview({
|
||||||
{...streamdownPlugins}
|
{...streamdownPlugins}
|
||||||
components={{ a: CitationLink }}
|
components={{ a: CitationLink }}
|
||||||
>
|
>
|
||||||
{content ?? ""}
|
{normalizedContent}
|
||||||
</Streamdown>
|
</Streamdown>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -535,7 +541,7 @@ export function ArtifactFilePreview({
|
||||||
className="size-full"
|
className="size-full"
|
||||||
containerClassName="h-full mb-[207px]"
|
containerClassName="h-full mb-[207px]"
|
||||||
title="Artifact preview"
|
title="Artifact preview"
|
||||||
srcDoc={content}
|
srcDoc={normalizedContent}
|
||||||
sandbox="allow-scripts allow-forms"
|
sandbox="allow-scripts allow-forms"
|
||||||
style={{ zoom: zoomScale }}
|
style={{ zoom: zoomScale }}
|
||||||
/>
|
/>
|
||||||
|
|
@ -582,6 +588,30 @@ function PreviewIframe({
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function rewriteArtifactImagePaths(content: string, threadId?: string) {
|
||||||
|
if (!threadId || !/\/?mnt\/user-data\//.test(content)) {
|
||||||
|
return content;
|
||||||
|
}
|
||||||
|
|
||||||
|
const markdownRewritten = content.replace(
|
||||||
|
/!\[([^\]]*)\]\(\s*(\/?mnt\/user-data\/outputs\/[^)\s]+)\s*\)/g,
|
||||||
|
(_full, alt, rawPath) => {
|
||||||
|
const normalizedPath = rawPath.startsWith("/") ? rawPath : `/${rawPath}`;
|
||||||
|
const artifactUrl = resolveArtifactURL(normalizedPath, threadId);
|
||||||
|
return ``;
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
return markdownRewritten.replace(
|
||||||
|
/(<img\b[^>]*\bsrc\s*=\s*)(["'])(\/?mnt\/user-data\/outputs\/[^"']+)\2/gi,
|
||||||
|
(_full, prefix, quote, rawPath) => {
|
||||||
|
const normalizedPath = rawPath.startsWith("/") ? rawPath : `/${rawPath}`;
|
||||||
|
const artifactUrl = resolveArtifactURL(normalizedPath, threadId);
|
||||||
|
return `${prefix}${quote}${artifactUrl}${quote}`;
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
type ArtifactPreviewKind =
|
type ArtifactPreviewKind =
|
||||||
| "html"
|
| "html"
|
||||||
| "image"
|
| "image"
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue