uniaap 使用图片base64显示问题
时间: 2024-06-17 18:03:47 浏览: 14
在uni-app中,可以通过将图片转换成base64编码的形式来显示图片。具体步骤如下:
1. 将图片转换成base64编码的形式,可以使用在线工具或者代码实现。
2. 在uni-app的页面中,使用img标签来显示图片,src属性的值设置为base64编码后的字符串即可。
3. 在样式中,可以通过设置width和height属性来调整图片的大小。
以下是示例代码:
```
<template>
<div>
<img :src="base64Img" alt="示例图片" style="width: 200px; height: 200px;">
</div>
</template>
<script>
export default {
data() {
return {
base64Img: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAE1SURBVDiN7ZMxa1RREAXQ/DMoFKIgJKgqKoqCiVQEVDCYg+g4JxUREWlq6qBpKf+oGzFx/jjJr6nUd+7G3Dn5vXnu7ul1D0ozp3lD5kfbKcOw8iRdwx5tKJ8jBujYwE7wgS/b2FvJsmF5GYtIwmT4Ws+IesvQs9AfR2+Lh+DnYrhWwXTM4j16gg6Owqzg3qO0mLX0iW6rWUCRXnWc4e1/7aL9jwZ8cYvZzdz9zAyA9bX7VakCgAAAABJRU5ErkJggg=='
}
}
}
</script>
```
相关推荐
![docx](https://img-home.csdnimg.cn/images/20210720083331.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)