使用在线HTML编辑器时如何存储网页图片并设置正确路径

1. 网页所需图片资源的存储方式 #

结合你用iPad做教学演示的场景，有3种实用的存储方式，全程不需要依赖电脑设备：

• 优先用在线编辑器自带的素材上传功能：绝大多数通用在线HTML编辑器都内置了静态资源托管能力，你直接在编辑器界面上传iPad相册、文件APP里存的教学用图，平台会自动给图片生成可公开访问的存储地址，这个方式操作最简便，上课演示不容易出问题。
• 小体积演示图可以直接转Base64编码嵌入：如果是大小在200KB以内的示例图、小图标，直接把图片转成Base64编码写进HTML代码里就行，不需要单独存储资源文件，单份HTML代码就能独立运行，完全不会出现路径错误导致的加载失败问题，很适合给学生做基础语法演示。
• 备用方案可以用可直链访问的云存储：如果你有支持文件直链的云存储空间，也可以把教学用图存在对应空间里，只要拿到不需要登录验证、没有访问权限限制的文件直链就能用，注意不要用带防盗链、需要登录才能查看的链接，不然会出现加载失败的问题。

2. 图片路径的正确编写规则 #

路径写法要和你选的存储方式匹配，不要直接照搬本地电脑开发的相对路径逻辑：

• 用编辑器上传、云存储直链的场景：直接把拿到的完整图片访问地址填到img标签的src属性里即可，属于绝对路径写法，不需要考虑文件层级关系，示例代码：

<img src="你拿到的图片完整访问地址" alt="课堂演示示例图">

• 用Base64编码嵌入图片的场景：src属性直接填写转码后的Base64字符串即可，示例代码：

<img src="data:image/png;base64,转码后生成的长文本内容" alt="Base64嵌入的示例图">

• 如果你把HTML文件和图片都导出到iPad本地、用本地文件预览的场景：才需要写相对路径。比如图片和HTML文件放在同一个文件夹，就写<img src="demo.png" alt="同目录下的演示图">；如果图片放在同目录下的images文件夹里，就写<img src="images/demo.png" alt="子文件夹里的演示图">。

常见踩坑提醒：在线编辑器的运行环境是云端沙箱，不是你iPad的本地文件系统，绝对不要直接填写iPad本地相册、本地文件APP里的私有路径（比如/我的相册/课程图1.png这类），这类路径只有你自己的iPad系统能识别，在线编辑器没有权限读取本地私有文件，肯定会加载失败。

3. 在线编辑器的图片显示能力说明 #

只要图片路径写法正确、资源可以正常公开访问，绝大多数正规的通用在线HTML编辑器都能实时正常显示嵌入的图片，完全不需要额外在电脑上安装本地HTML编辑程序才能看到效果。
如果遇到图片加载不出来的情况，基本都是以下几个可排查的问题，不是编辑器本身不支持：

• 填写的是iPad本地私有文件路径，编辑器没有读取权限
• 图片存储的位置设置了访问限制、开启了防盗链，导致编辑器预览窗口拉取不到图片资源
• 路径存在拼写错误，比如文件名打错、后缀名遗漏、相对路径的层级关系写错
  上课前建议提前在编辑器里测试好所有图片的加载效果，避免临场出问题；如果担心在线环境不稳定，提前把写好的HTML文件导出存到iPad本地，直接用Safari浏览器打开本地HTML文件也能正常预览所有效果，不需要借助电脑设备。

内容的提问来源于stack exchange，提问作者longus200