uniapp显示base64格式的图片

要在Uniapp中显示base64格式的图片，可以使用uni-image组件。以下是一个示例代码：

<template>
  <view>
    <uni-image :src="imgUrl"></uni-image>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        imgUrl: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABVklEQVRIS+2UwQrAIAxF2z//6UuW6Qd5QbYC5cN3Jq9alEKW5Dl7n+5pGJnkslRnrRJdZ/Vf0/UeRbG0cX1RQ2OJt+3Eo3vz8Kk+o0P7O4JF4jv4Xg4ZlYSiG4J1CkSvQL8fzWItGJdAe0nJMcjKZj8XQ1Q2lEJ+D3tqLzjKzKY+M4Fm4v4K4jZ8Xz+TmL/HfJvKkAAAAASUVORK5CYII='
      }
    }
  }
</script>

在上面的代码中，我们使用`uni-image`组件，并将base64格式的图片赋值给`src`属性。需要注意的是，`src`属性的值必须以`data:`开头，并且包含图片的格式和编码方式（在本例中，图片格式为png，编码方式为base64）。

运行该代码，即可在页面上显示出base64格式的图片。

相关问题

uniapp怎么base64格式图片显示在canvas上

在uniapp中，可以使用uni.getImageInfo获取图片信息，然后将图片转换成base64格式，在canvas中显示。下面是一个示例代码：

// 获取图片信息
uni.getImageInfo({
  src: 'https://example.com/image.jpg',
  success: function (image) {
    // 将图片转换成base64格式
    uni.getFileSystemManager().readFile({
      filePath: image.path,
      encoding: 'base64',
      success: function (base64) {
        // 将base64格式的图片绘制到canvas上
        const ctx = uni.createCanvasContext('canvas');
        const imgData = 'data:image/png;base64,' + base64.data;
        ctx.drawImage(imgData, 0, 0, image.width, image.height);
        ctx.draw();
      }
    });
  }
});

需要注意的是，canvas绘制图片的时候需要等待图片加载完成后再绘制，所以需要在getImageInfo的回调函数中进行base64转换和canvas绘制的操作。

uniapp怎base64格式图片展示在canvas上

在uniapp中，可以使用uni.getImageInfo方法获取base64格式的图片信息，然后将该信息绘制在canvas上。

具体实现步骤如下：

1. 获取base64格式的图片信息

uni.getImageInfo({
  src: 'data:image/png;base64,iVBORw0KG...',
  success: function (res) {
    console.log(res.width)
    console.log(res.height)
  }
})

2. 在canvas上绘制图片

// 获取canvas上下文
const ctx = uni.createCanvasContext('myCanvas')

// 绘制图片
ctx.drawImage('data:image/png;base64,iVBORw0KG...', 0, 0, res.width, res.height)

// 将绘制结果显示在页面上
ctx.draw()

这样就可以将base64格式的图片展示在canvas上了。需要注意的是，如果要在canvas上绘制的图片过大，可能会导致canvas绘制失败，需要对图片进行压缩或裁剪。