CSDN图片加载不出来问题解决

CSDN图片加载不出来问题解决

这个情况一般是由于在Typora中调整了图片缩放导致的

像这两张图我都在Typora中调整为了50%大小

Typora自动将它转换为使用HTML标签，而其中的style中的zoom属性无法被CSDN识别，因此图片无法加载

解决方法有两种（前提：已经配置好图床）

1.最简单的方法 ->不缩放图片

这种方法固然有效，但是在CSDN中图片默认不会居中，而且全部都很大，不够美观

2.比较好的解决方法->使用python脚本转换

脚本代码往下翻

先说说这个脚本能够做什么

将图片缩放标签改为CSDN能够识别的形式
居中图片

用法也很简单：使用前需要配置Python环境，并且安装Python的PIL库

这些大家自行搜索教程，这里不再赘述

首先将我给的python文件放到 要转换的md文件 的同一目录下

点击文件管理器左上角的框框，输入cmd后回车，打开命令行

在cmd中输入一下内容并回车

python3 transform.py 你的md文件名.md

当看到以下内容时代表已经转换完成（图片比较多的话就耐心等待一下）

注意不要带有中文文件名

此时目录中会出现一个带有CSDN前缀的md文件，使用此文件上传csdn即可

Python脚本代码

这篇文章中的图片都是经过了这个脚本转换的

脚本采用了正则匹配来获取图片信息，学过python的同学应该比较熟悉了

import io
import re
import sys
import urllib.request
from PIL import Image

def get_size(img_path):  # 根据图片链接获取图片的大小
    response = urllib.request.urlopen(img_path)
    temp_img = io.BytesIO(response.read())
    img = Image.open(temp_img)
    return img.size

def alter(s):  # 处理未修改大小的图片
    return "![](" + s.group(2) + "#pic_center)"

def alter_zoom(s):  # 处理 typora 中用 zoom 属性修改过大小的图片
    zoom_value = int(s.group(4)) / 100
    w, h = get_size(s.group(2))
    new_w, new_h = int(zoom_value * w), int(zoom_value * h)
    return "![](" + s.group(2) + "#pic_center" + f' ={new_w}x{new_h})'
    #return s.group(1) + s.group(2) + "#pic_center" + s.group(3) + f'width="{s.group(4)}%"' + s.group(5) #注释掉的这种方法不保证100%可以

def alter_zoom_empty(s):  # 处理 typora 中用 zoom 属性修改过大小的图片
    return "![](" + s.group(2) + "#pic_center)"

file_name = sys.argv[1]
with open("./" + file_name, "r", encoding="utf-8") as fin, open("./" + 'CSDN_' + file_name , "w", encoding="utf-8") as fout:
    pattern = re.compile(r"(!\[image-\d+]\()(.+)(\))")  # 未修改大小的图片的匹配规则
    pattern_zoom = re.compile(r'(<img src=")(.*)(" .* )style="zoom:\s?(\d+)%;"(\s?/>)')  # 带有 zoom 属性的图片的匹配规则
    pattern_zoom_empty = re.compile(r'(<img src=")(.*)(" .* )style="zoom:();"(\s?/>)')  # 带有 zoom 属性的图片的匹配规则
    content = fin.read()  # 读取文件内容
    content1 = pattern.subn(alter, content)  # 第一次处理
    content2 = pattern_zoom.subn(alter_zoom, content1[0])  # 第二次处理
    content3 = pattern_zoom_empty.subn(alter_zoom_empty, content2[0])  # 第三次处理
    fout.write(content3[0])  # 写入新文件
    print("原始图片替换次数：", content1[1])
    print("zoom 属性图片替换次数：", content2[1] + content3[1])
    print("总共替换次数：", content1[1] + content2[1] + content3[1])