uniapp 引入图片
时间: 2023-08-02 12:23:07 浏览: 103
uniapp图片上传
在uniapp中引入图片,可以使用`<img>`标签或者`<uni-image>`组件。
1. 使用`<img>`标签
```html
<img src="/static/image/example.png" alt="示例图片">
```
其中,`src`属性指定图片的路径,路径可以是相对路径或者绝对路径。在uniapp中,可以将图片放在`static`目录下,然后使用相对路径引用。
2. 使用`<uni-image>`组件
```html
<uni-image src="/static/image/example.png"></uni-image>
```
`<uni-image>`组件是uniapp提供的图片组件,功能比`<img>`标签更强大,可以支持懒加载、预览、缩放等功能,使用时需要在页面中引入组件:
```html
<template>
<view>
<uni-image src="/static/image/example.png"></uni-image>
</view>
</template>
<script>
import uniImage from '@/components/uni-image/uni-image.vue'
export default {
components: {
uniImage
}
}
</script>
```
这样就可以在页面中使用`<uni-image>`组件引入图片了。
阅读全文