如何将本地图片嵌入网页？

引言

因为经常会用Mardown写作，图片一般是用本地图片，但是导出html的时候，图片路径还是连接到本地的图片，如果把这个网页文件放到其他地方，就找不到图片了，所以最后显示不出来。后来得知可以把图片以base64编码方式嵌入网页之中，这样随便移动html文件到任何地方，打开之后都会显示图片了，唯一缺点就是会增大此html文件的大小。
但是，该如何实现呢？还是求助于强大的python吧。

Python实现

少啰嗦，上源码

# -*- coding: utf-8 -*-
# __author__ = SHI

import os
import re
import base64

def findimg(content):
    '''
    查找网页中所有的img,类似img src='1.png'，返回1.png
    :param content: 网页内容
    :return: 返回找到的所有图片文件名列表
    '''
    patt = re.compile('<img src="(.+)" ') #正则表达式查找所有的img
    grp = re.findall(patt,content)
    # print(grp)
    return grp

def findcomment(content):
    '''
    查找注释，删除注释
    :param content: 网页源内容
    :return: 删除注释后的网页内容
    '''
    patt = re.compile('(<!--.+-->)')
    grp = re.findall(patt,content)
    # print(grp)
    for g in grp:
        content = content.replace(g,'')
    return content

def imgbase64(pic_path):
    '''
    实现图片的base64编码，返回编码字符串
    :param pic_path:
    :return:
    '''
    pic_basename = os.path.basename(pic_path)
    file_ext = pic_basename.split('.')[-1].lower()
    # print(file_ext)

    if file_ext == "jpg" :
        tag = "jpg"
    elif file_ext == "jpeg" :
        tag = "jpg"
    elif file_ext == "png" :
        tag = "png"
    elif file_ext == "bmp" :
        tag = "bmp"
    else:
        print("Unsupported image format !")
        return None

    with open(pic_path, "rb") as imageFile:
        str_pic = base64.b64encode(imageFile.read()).decode('ascii')
        # print(str_pic)

    str_begin = 'data:image/' + tag + ';base64,'
    result_str = str_begin + str_pic
    # print(result_str)
    return result_str

def readhtml():
    '''
    读取当前目录下的所有html文件，并查找本地图片，实现嵌入图片的base64编码
    :return: 无
    '''
    for file in os.listdir('.'):
        if file.endswith(".html"):
            # print (file)
            with open(file,'r+',encoding='utf-8') as html:
                content = html.read()       # 读取html文件内容
                pics = findimg(content)     # 查找所有内容中的本地图片
                for pic in pics:
                    if os.path.exists(pic):
                        base64code = imgbase64(pic)     # base64编码图片文件
                        content = content.replace(pic,base64code)   # 替换html文件内容

                content = findcomment(content)      # 去除html文件中的注释
                html.seek(0)
                html.write(content)                 # 覆写

# 打包生成可执行程序的命令
# pyinstaller --noupx -F -w --icon=mylogo.ico imgbase64.py
if __name__ == '__main__':
    readhtml()

注释差不多已经很详细了。

如何使用？

• 把我们的可执行程序，网页文件，图片放到同一目录下；
• 双击运行可执行程序；
• 对，就是这么简单。

运行前：

运行前

运行后：

运行后

下载资源

源码文件 和 可执行程序

是不是很好奇那张图片1.png到底是什么？