BraveCL如何在Mac上创建HTML图片代码
为多张图片生成包含嵌入式Base64数据和描述性替代文本的HTML图片标签。
- 完成效果
- 完成一个包含3个图片标签的HTML图片集，每个标签均嵌入数据URI和描述性替代文本，可复制或输出完整结果。
- 准备工作
- Mac上已安装Image Base64 Encoder
- 内置示例图片，或你自己的PNG或JPEG文件
Image Base64 Encoder可将多张图片组合成独立完整的HTML图片代码片段。先使用内置示例，了解图片集及其描述的运作方式。
1.加载示例图片
选择Try Samples（试用示例），加载应用附带的PNG和JPEG示例。Sources（来源）列表会显示Checkout-Badge.png、Developer-Workspace.jpg和Circuit-Board.jpg。Image（图片）视图会预览所选文件编码后的数据URI。
Mac上的Image Base64 Encoder显示3张已加载的PNG和JPEG示例图片，以及编码后的Data URI预览 2.构建HTML图片集
选择预览上方的Set（图片集），并在输出格式控件中保持选中HTML。逐一选择Sources（来源）中的条目，在Description（描述）中输入有意义的替代文本。保持Decorative image（装饰性图片）关闭，让每段描述成为alt属性。确认Set Readiness（图片集就绪状态）显示图片集已就绪，然后检查3张图片各自的HTML代码和合并后的snippets.html预览。预览可能会被截断，但Copy（复制）和Deliver（输出）使用完整结果。
Image Base64 Encoder显示已就绪的HTML图片集、3个独立代码片段，以及HTML图片标签中的描述性替代文本
实用提示
使用Image和Set选项卡，对比单张图片的数据URI与合并后的HTML输出。
关闭Decorative image后，每段描述都会成为对应图片的替代文本。
Base64内容较长时，预览可能会被截断；Copy和Deliver使用完整结果。
注意嵌入Base64图片数据可能会大幅增加HTML的大小。分享或嵌入输出内容前，请检查界面显示的复制内容大小。
