uniapp的弹窗uni.showModal里这么放图片
时间: 2023-12-18 17:29:27 浏览: 1462
根据我所了解的情况,uni.showModal并不支持在弹窗中放置图片。如果您需要在弹窗中显示图片,可以考虑使用自定义组件来实现。具体步骤如下:
1.在您的uni-app项目中创建一个自定义组件,例如popup-image。
2.在popup-image组件中添加一个image标签,用于显示图片。
3.在需要弹窗的页面中引入popup-image组件,并在uni.showModal的success回调函数中设置需要显示的图片路径。
4.在success回调函数中,先关闭uni.showModal弹窗,再打开popup-image组件弹窗,即可在弹窗中显示图片。
下面是一个简单的示例代码:
```html
<!-- popup-image组件 -->
<template>
<view class="popup-image">
<image :src="imageUrl"></image>
</view>
</template>
<script>
export default {
props: {
imageUrl: {
type: String,
default: ''
}
}
}
</script>
```
```javascript
// 在需要弹窗的页面中引入popup-image组件
import PopupImage from '@/components/popup-image'
// 在uni.showModal的success回调函数中设置需要显示的图片路径
uni.showModal({
title: '提示',
content: '是否查看图片?',
success(res) {
if (res.confirm) {
// 关闭uni.showModal弹窗
uni.hideModal()
// 打开popup-image组件弹窗,显示图片
uni.$emit('showPopup', {
component: PopupImage,
props: {
imageUrl: '图片路径'
}
})
}
}
})
```
阅读全文