vue-quill-editor富文本展示图片
时间: 2024-01-19 13:05:18 浏览: 108
vue使用富文本(quill)
5星 · 资源好评率100%
你可以使用vue-quill-editor来展示富文本中的图片。默认情况下,vue-quill-editor会将图片转换为base64编码。以下是一个示例代码,演示了如何在vue-quill-editor中展示图片:
```vue
<template>
<div>
<quill-editor v-model="content" :options="editorOptions"></quill-editor>
<div v-html="content"></div>
</div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
export default {
components: {
quillEditor
},
data() {
return {
content: '<p><img src="data:image/png;base64,iVBORw0KG..."></p>',
editorOptions: {
// 设置其他的编辑器选项
}
}
}
}
</script>
```
在上面的代码中,我们使用了vue-quill-editor组件,并将富文本内容绑定到`content`变量上。然后,我们使用`v-html`指令将`content`变量中的内容渲染为HTML,从而展示富文本中的图片。
请注意,上述代码中的`<img>`标签中的`src`属性是一个base64编码的图片示例。你需要将其替换为你自己的图片路径或base64编码。
阅读全文