uniapp中uni.getImageInfo()获取的路径如何展示在image标签的src里面
时间: 2024-06-10 20:07:04 浏览: 4
可以将uni.getImageInfo()获取到的图片路径赋给image标签的src属性,例如:
```
uni.getImageInfo({
src: 'https://example.com/image.jpg',
success: function(res) {
let imgPath = res.path; // 获取到本地路径
// 将路径赋给image标签的src属性
document.getElementById('myImage').src = imgPath;
}
});
```
其中,`myImage`是image标签的id。
相关问题
uniapp中uni.getImageInfo()获取的本机存储路径图片如何展示在image标签的src里面
你可以使用uni.getImageInfo()获取本机存储路径图片的信息,包括路径、宽度、高度等。然后通过setData()方法将图片路径存储在data中,然后在image标签中使用{{}}绑定data中的图片路径。示例代码如下:
```
// 获取本机图片信息
uni.getImageInfo({
src: '本机存储路径图片地址',
success: function(res) {
// 将路径存储在data中
that.setData({
imageUrl: res.path
})
}
})
// 在image标签中绑定图片路径
<image src="{{imageUrl}}"></image>
```
uniapp的app端中uni.getImageInfo()获取的本机存储路径图片如何展示在image标签的src里面
你可以使用uni.getImageInfo()获取图片信息后,将路径赋值给image标签的src属性即可展示图片,示例代码如下:
```
<template>
<view>
<image :src="imgPath"></image>
</view>
</template>
<script>
export default {
data() {
return {
imgPath: ''
}
},
methods: {
async getImageInfo() {
let res = await uni.getImageInfo({
src: '/storage/emulated/0/DCIM/Camera/test.jpg'
})
this.imgPath = res.path
}
},
mounted() {
this.getImageInfo()
}
}
</script>
```
其中,getImageInfo()方法获取图片信息并将路径赋值给imgPath,mounted()生命周期钩子在组件挂载后执行getImageInfo()方法,最终展示在页面的是imgPath所对应的图片。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)