添加图片路径
markdown 中引用图片
使用语法
![html显示名字](图片名字)
这里需要注意的是,doxygen 已经指定了 image
路径,所以引用图片的时候直接写图片名字即可,不用再写相对路径
使用这种方法引用的图片在生成 doxygen 文档时默认是居中显示的
图片靠左显示
markdown 标准语法
在图片的 URL 后面加上 #pic_left
,#pic_right
,#pic_center
即可
![show_name](../pic_test.png#pic_left)
这种语法是 markdown 标准语法,在 doxygen 中并不适用
示例
![arm interrupt](https://img-blog.csdnimg.cn/771ab8b7a2824e208f49cfa75656e04e.png#pic_left)
效果
doxygen 让 markdown 图片靠左语法
<img src="pic_test.png" align="left"/>
<div style="clear: both;"></div>
这两句的作用是在HTML中创建一个左浮动的图片,并使用<div style="clear: both;"></div>
代码来清除前面的浮动元素。
-
第一句
<img src="pic_test.png" align='left'/>
创建了一个左浮动的图片。 align=‘left’ 属性使图片靠左对齐。 -
第二句
<div style="clear: both;"></div>
是一个HTML
代码,用于创建一个清除元素。在HTML
和CSS
中,clear: both;
属性用于清除前面的浮动元素。
通过添加这段代码,可以清除前面的浮动元素(在这种情况下是左浮动的图片),并为接下来的内容创建一个新的块格式化上下文。
这样可以确保接下来的内容出现在清除元素的下方,即文本出现在图片的下方。
示例
<img src="https://i-blog.csdnimg.cn/blog_migrate/78ef24e03dcc169a599ba28781ca1807.png" align="left"/>
<div style="clear: both;"></div>
效果
后面继续输入文字。。。。。。
如果没有 <div style="clear: both;"></div>
这一句,那么后续输入的文字不会换行到图片末尾,后续文字的排版也就乱了。
示例
<img src="https://i-blog.csdnimg.cn/blog_migrate/78ef24e03dcc169a599ba28781ca1807.png" align='left'/>
效果
![](https://i-blog.csdnimg.cn/blog_migrate/78ef24e03dcc169a599ba28781ca1807.png)
后面继续输入文字。。。。。。
这里可以看到,后续的文字没有换行到图片底部
上面没有换行到图片底部,这里都是占行符x
x
x
x
x
x
x
x
x
x
图片靠左显示并显示图片标题
上面的方法中图片虽然可以靠左显示,但是在 HTML 语法中, <img>
标签本身并没有提供指定图片标题的属性。
使用语法
<div>
<img src="picture_name.png" alt="Image" align="left">
<div style="clear: both;"></div>
<div class="caption">这是图片的标题或说明文字。</div>
</div>
- 最外层的
<div>
元素用作容器,用于容纳图片和标题。 <img>
标签用于显示图片。src
属性指定了图片文件的路径(在这里是"picture_name.png"
)。alt
属性为图片提供替代文本,如果图片无法加载,将显示该文本。align
属性设置为left
,将图片左对齐。- 带有内联样式
clear: both
; 的<div>
元素用于清除它上面的任何浮动元素。这确保标题出现在图片下方,即使存在其他浮动元素。 - 最后的
<div>
元素具有类名"caption"
,其中包含了图片的实际标题或说明文字。
通过组合这些元素和样式,代码创建了一个布局,其中图片左对齐,标题出现在图片下方。