uniapp访问本地绝对路径的图片

在 `uni-app` 中，如果要访问本地绝对路径的图片，可以使用 `file://` 协议。以下是一个示例：

<template>
  <image :src="localImageUrl" mode="widthFix"></image>
</template>

<script>
export default {
  data() {
    return {
      localImageUrl: ''
    }
  },
  mounted() {
    this.getLocalImage()
  },
  methods: {
    // 获取本地图片
    getLocalImage() {
      // 本地图片绝对路径
      const localImagePath = '/storage/emulated/0/DCIM/Camera/IMG_20220101_123456.jpg'

      // 通过 file:// 协议获取图片
      this.localImageUrl = `file://${localImagePath}`
    }
  }
}
</script>

需要注意的是，由于安全策略的限制，部分系统或者浏览器可能不支持 `file://` 协议的访问。另外，在使用 `file://` 协议时，需要确保图片的路径是正确的。

相关问题

uniapp 本地图片路径转base64

可以使用uniapp自带的`uni.getImageInfo()`方法获取本地图片的信息，然后使用`uni.getFileSystemManager()`方法读取本地图片的内容，最后使用`uni.arrayBufferToBase64()`方法将图片内容转为base64编码。

示例代码如下：

// 获取图片信息
uni.getImageInfo({
  src: '/static/image.jpg',
  success: function (res) {
    // 读取图片内容
    uni.getFileSystemManager().readFile({
      filePath: res.path,
      encoding: 'base64',
      success: function (data) {
        // 转为base64编码
        var base64Data = uni.arrayBufferToBase64(data.data)
        console.log(base64Data)
      }
    })
  }
})

在uniapp中图片拼接路径

在uniapp中，图片路径可以通过以下方式拼接：

1. 使用相对路径：

<template>
  <img src="../../static/img/avatar.jpg" alt="avatar">
</template>

2. 使用绝对路径：

<template>
  <img src="/static/img/avatar.jpg" alt="avatar">
</template>

注意：在使用绝对路径时，需要在路径前面添加"/"，否则路径会被认为是相对路径。

3. 使用动态路径：

<template>
  <img :src="imgUrl" alt="avatar">
</template>

<script>
export default {
  data() {
    return {
      imgUrl: '/static/img/avatar.jpg'
    }
  }
}
</script>

在数据中定义图片路径，然后在模板中使用动态绑定的方式渲染图片。