---
title: Image图片
description: 用于展示jpg，png，svg图片信息。
---

## 语法

文档系统中，可通过多种方式来渲染图片信息。

- `<img/>`标签形式，这种方式比较灵活，可自行定义图片的样式。

- `<ldesign-image/>`组件方式，该标签是基于`stencil`编写的一个通用`webcomponent`组件，除了使用方便，还提供相比原生图片更为强大的功能。

- `markdown`语法，可通过markdown自定义容器来渲染图片，其主要写法和`webcomponent`，不一样，原理还是基于webcomponent进行渲染。

- `vue`组件，除了上面内置的图片渲染容器外，还可自定义一个vue组件，通过引入的方式进行渲染，如对vue组件不了解，不推荐使用。

### HTML标签

在文档中，依然可以使用`<img/>`标签来渲染图片信息，需要注意图片路径都是以`/`开头，代表`public`目录。

``` html
<img src="/images/image1.svg" style="width: 60%;"/>
```

<img src="/images/image1.svg" style="width: 60%;"/>

### webcomponent组件

基于`stencil`的自定义组件。

``` html
<ldesign-image src="/images/image1.svg" style="width:60%;"></ldesign-image>
```

<ldesign-image src="/images/image1.svg" style="width:60%;"></ldesign-image>

### markdown语法

通过简单的字符拼接方式来实现图片的渲染

``` markdown
!!! ldesign-image /images/image1.svg | | width:60%;
!!!
```

!!! ldesign-image /images/image1.svg | | width:60%;
!!!

### vue组件

首先需要定义一个`vue`组件，具体请参考`components/image.vue`。

最后只需要在markdown中引入使用即可。

``` html
<Image src="/images/image1.svg"/>

<script setup>
  import Image from './components/image.vue'
</script>
```

<Image src="/images/image1.svg"/>

<script setup>
  import Image from './components/image.vue'
</script>


## 总结

以上四种方法都可以显示图片，推荐使用markdown形式，毕竟文档其他部分都是markdown语法，为了文档内容统一性以及简单性，尤其`vue`组件方式不到万不得已不推荐使用。