diff --git a/ui/src/assets/load_error.png b/ui/src/assets/load_error.png new file mode 100644 index 000000000..695abfd88 Binary files /dev/null and b/ui/src/assets/load_error.png differ diff --git a/ui/src/components/markdown/MdRenderer.vue b/ui/src/components/markdown/MdRenderer.vue index ec7f03fac..517a3bc56 100644 --- a/ui/src/components/markdown/MdRenderer.vue +++ b/ui/src/components/markdown/MdRenderer.vue @@ -32,6 +32,17 @@ import HtmlRander from './HtmlRander.vue' import EchartsRander from './EchartsRander.vue' config({ markdownItConfig(md) { + md.renderer.rules.image = (tokens, idx, options, env, self) => { + tokens[idx].attrSet('style', 'display:inline-block;min-height:33px;padding:0;margin:0') + if (tokens[idx].content) { + tokens[idx].attrSet('title', tokens[idx].content) + } + tokens[idx].attrSet( + 'onerror', + 'this.src="/ui/assets/load_error.png";this.onerror=null;this.height="33px"' + ) + return md.renderer.renderToken(tokens, idx, options) + } md.renderer.rules.link_open = (tokens, idx, options, env, self) => { tokens[idx].attrSet('target', '_blank') return md.renderer.renderToken(tokens, idx, options) @@ -52,51 +63,9 @@ const props = withDefaults( const editorRef = ref() const md_view_list = computed(() => { const temp_source = props.source - const temp_md_img_list = temp_source.match(/(!\[.*?\]\(img\/.*?\){.*?})|(!\[.*?\]\(img\/.*?\))/g) - const md_img_list = temp_md_img_list ? temp_md_img_list.filter((i) => i) : [] - const split_img_value = temp_source - .split(/(!\[.*?\]\(img\/.*?\){.*?})|(!\[.*?\]\(img\/.*?\))/g) - .filter((item) => item !== undefined) - .filter((item) => !md_img_list?.includes(item)) - const result = Array.from( - { length: md_img_list.length + split_img_value.length }, - (v, i) => i - ).map((index) => { - if (index % 2 == 0) { - return split_img_value[Math.floor(index / 2)] - } else { - return md_img_list[Math.floor(index / 2)] - } - }) - return split_echarts_rander(split_html_rander(split_quick_question(split_md_img(result)))) + return split_echarts_rander(split_html_rander(split_quick_question([temp_source]))) }) -const split_md_img = (result: Array) => { - return result - .map((item) => split_md_img_(item)) - .reduce((x: any, y: any) => { - return [...x, ...y] - }, []) -} -const split_md_img_ = (source: string) => { - const temp_md_img_list = source.match(/(!\[.*?\]\(.*?\){.*?})|(!\[.*?\]\(.*?\))/g) - const md_img_list = temp_md_img_list ? temp_md_img_list.filter((i) => i) : [] - const split_img_value = source - .split(/(!\[.*?\]\(.*?\){.*?})|(!\[.*?\]\(.*?\))/g) - .filter((item) => item !== undefined) - .filter((item) => !md_img_list?.includes(item)) - const result = Array.from( - { length: md_img_list.length + split_img_value.length }, - (v, i) => i - ).map((index) => { - if (index % 2 == 0) { - return split_img_value[Math.floor(index / 2)] - } else { - return md_img_list[Math.floor(index / 2)] - } - }) - return result -} const split_quick_question = (result: Array) => { return result .map((item) => split_quick_question_(item))