Markdown中嵌入base64图片

在有道云做笔记的时候,常常使用markdown记笔记,这样看起来更加清晰,但是涉及到图片的时候,常用的处理方法是:

1、将本地的图片地址传入
2、将网络上的图片地址传入。

这两种方式都存在一个问题:

第一种方式,如果我们在阅读markdown的时候本地环境中没有这张图片时,图片会显示不出来。
第二种方式,如果网站做了防盗链,图片也不能显示出来。

但如果使用base64的编码将图片嵌入文档中,便不会出现以上问题,这时图片将成为文档中的一部分。
步骤如下:

1、将图片或截图保存在本地;
2、使用在线工具将图片转码至base64编码;(链接
3、 在文档中插入编码;![image](base64)

这时又有一个问题,就是图片转换为base64之后,这段代码特别长,会影响到我们书写笔记,所以我们采用为图片代码设置image id,将这段代码放在最后即可!

格式如下:

![image][image id]
you can write your document here 
[image id]:your image's base64

这样就可以实现将图片内嵌入markdown中了

  • 10
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Vue使用`vue-markdown`实现粘贴图片Base64位的功能,您可以使用第三方库`vue-simplemde`来实现。以下是一个简单的示例: 1. 首先,使用npm或yarn安装`vue-simplemde`: ``` npm install vue-simplemde ``` 2. 在您的Vue组件,导入并注册`vue-simplemde`: ```javascript import VueSimplemde from 'vue-simplemde'; export default { components: { VueSimplemde, }, }; ``` 3. 在模板使用`vue-simplemde`: ```html <template> <div> <vue-simplemde v-model="markdownText" @paste="handlePaste"></vue-simplemde> </div> </template> ``` 4. 在Vue组件的`data`定义`markdownText`,用于存储Markdown文本: ```javascript export default { data() { return { markdownText: '', }; }, }; ``` 5. 在Vue组件定义处理粘贴事件的方法`handlePaste`,将粘贴的图片转换为Base64位: ```javascript export default { methods: { handlePaste(event) { const items = (event.clipboardData || event.originalEvent.clipboardData).items; for (let i = 0; i < items.length; i++) { const item = items[i]; if (item.kind === 'file' && item.type.indexOf('image') !== -1) { const reader = new FileReader(); reader.onload = (e) => { const base64Image = e.target.result; // 将base64Image插入到markdownText this.markdownText += `![Image](${base64Image})`; }; reader.readAsDataURL(item.getAsFile()); } } }, }, }; ``` 通过以上步骤,您可以在Vue使用`vue-simplemde`实现Markdown编辑器,并在粘贴图片时将其转换为Base64位。请注意,您可能需要根据您的项目需求进行进一步的配置和样式调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值