如何往文章里添加图片

发表于 分类于

Markdown 图片语法

![图片替代文本](图片链接 "图片title")

要添加图像，请使用感叹号 (!), 然后在方括号增加替代文本，图片链接放在圆括号里，括号里的链接后可以增加一个可选的图片标题文本。

图片链接可以是网络上的某张图片的地址，也可以是本地的图片路径。

本地图片路径可以是绝对路径，也可以是相对路径，相对路径就是以该md文件为起点。

Hexo 图片添加方法一：资源文件夹

  • 可以把图片放在全局资源文件夹 source/images 里，然后通过 ![](/images/image.jpg) 这种写法去引用图片。

  • 也可以给每篇文章建一个对应文章资源文件夹，需要将 config.yml 文件里的 post_asset_folder 置为 true 。当这个开关打开后，Hexo 将会在你每一次通过 hexo new [layout] <title> 命令创建新文章时自动创建一个文件夹。然后通过标签 {% asset_img example.jpg %} 去引用图片。

上面提到的全局资源文件夹和文章资源文件夹这两种方式，都只是 Hexo 的“方言”，如果把这样的md文件单独放进某个markdown编辑器里预览，是看不到图片的。

Hexo 图片添加方法二：Hexo 插件

hexo-asset-img

xxx
├── a.jpg
├── b.png
└── c.jpg
xxx.md

安装好这个插件后，可以通过 ![](xxx/a.jpg) 来引用图片。这样的话 Hexo 和 Markdown 编辑器都能正确预览图片了。

可以通过输入 npm search 插件名 来查看有哪些插件，然后再选择一个安装。

Hexo 图片添加方法三：图床

利用图床工具，上传图片，获取链接，然后填入链接。但是图床大多收费，有的就算现在不收费，你用一段时间就收你的费了。

Hexo 图片添加方法四：图片转文本

可以把图片转成base64编码，以文本的形式放进md文件里。但是base64编码会增大了三分之一的体积，而且同一个md文件里，如果图片太多的话，加载也慢。还有就是md文件会变得臃肿，不便于编辑。

  • 有现成的网站，比方说图片转base64

  • 也可以利用python，源码如下

    #!/usr/bin/env python3
# -*- coding: utf-8 -*-

import os
import pyperclip
import base64

# 图片文件名
g_pic_name = 'IMG_2649'

# 图片后缀名
g_pic_ext = 'webp'

# 图片所在目录，从py文件所在的目录开始算，要跟斜杠
g_folder_name = '2022LaborDay/'

if __name__ == '__main__':

    # 拼接完整的路径
    fullpath = g_folder_name + g_pic_name + '.' + g_pic_ext
    fullpath = os.path.join(os.path.abspath('.'), fullpath)

    # 校验图片是否存在
    is_file_exists = os.path.exists(fullpath)
    assert(is_file_exists)

    f=open(fullpath, 'rb')
    str1=base64.b64encode(f.read())
    f.close()
    str2=str(str1, 'utf-8')
    str3='[' + g_pic_name + ']:data:image/' + g_pic_ext + ';base64,' + str2
    pyperclip.copy(str3)

    我这里用的Python3。这个脚本执行完之后，就可以粘贴字符串了。

  • 再提供一个图形化界面程序：

    #!/usr/bin/env python3
# -*- coding: utf-8 -*-
from tkinter import *
from tkinter import filedialog
from tkinter import messagebox
from PIL import Image, ImageTk
import base64
import pyperclip
import os

class App:
    def __init__(self, master):
        self.master = master
        self.master.title('图片转Base64编码')
        self.master.geometry('400x400')

        self.label = Label(self.master, text='请点击按钮选择图片文件')
        self.label.pack(pady=20)

        self.button = Button(self.master, text='选择文件', command=self.select_file)
        self.button.pack(pady=10)

        self.image_label = Label(self.master)
        self.image_label.pack(pady=20)

        self.convert_button = Button(self.master, text='转换成Base64编码', command=self.convert)
        self.convert_button.pack(pady=10)

    def select_file(self):
        filetypes = (
            ('所有文件', '*.*'),
            ('PNG 文件', '*.png'),
            ('JPEG 文件', '*.jpg'),
            ('WEBP 文件', '*.webp')
        )

        filename = filedialog.askopenfilename(
            title='选择图片文件',
            initialdir='./',
            filetypes=filetypes
        )

        if filename:
            self.filename = filename
            self.label.config(text=f'已选择文件：{self.filename}')

            image = Image.open(self.filename)
            image = image.resize((200, 200))
            photo = ImageTk.PhotoImage(image)

            self.image_label.config(image=photo)
            self.image_label.image = photo

    def convert(self):
        if not hasattr(self, 'filename'):
            messagebox.showerror('错误', '请先选择图片文件')
            return

        with open(self.filename, 'rb') as f:
            data = f.read()
            base64_data = base64.b64encode(data)
            base64_str = base64_data.decode('utf-8')
            file_name_with_ext = os.path.basename(self.filename)
            file_name_without_ext, file_extension = os.path.splitext(file_name_with_ext)
            file_extension = file_extension[1:]
            final_str='[' + file_name_without_ext + ']:data:image/' + file_extension + ';base64,' + base64_str
            pyperclip.copy(final_str)
            # messagebox.showinfo('提示', '已复制Base64编码到剪贴板')
            self.label.config(text=f'已复制')

root = Tk()
app = App(root)
root.mainloop()

  • 为了美观再做一点改动

    插入的这一长串字符串会把整个文章分割开，非常影响编写文章时的体验。

    如果能够把大段的base64字符串放在文章末尾，然后在文章中通过一个id来调用，文章就不会被分割的这么乱了。

    在要引用图片的地方这么写 ![][str1]

    这个 str1 是一个你自己指定的字符串，可以理解成是一个变量，用来寻找这个图片对应的base64字符串。

    在文章的末尾写 [str1]:data:image/这里写图片的格式如png;base64,这里写图片转出来的base64串 就可以了。

    测试