Taro中调用wx.chooseImage获取图片路径后无法显示到页面怎么办？

码农思晨提问于 2026-02-06 16:27:30 阅读 23

框架

在用Taro开发小程序时，调用Taro.chooseImage选了图片，返回的tempFilePath能打印出来，但显示到标签里就是空白。

试过直接赋值给的src属性：


// 页面JS
const [imageSrc, setImageSrc] = useState('');
Taro.chooseImage({
  success(res) {
    const path = res.tempFilePaths[0];
    console.log('路径:', path); // 打印正常
    setImageSrc(path);
  }
});

然后在WXML里这样绑定：


<img src="{{imageSrc}}" mode="aspectFit" style="width:200px"/>

控制台没报错，但图片始终不显示，路径格式是/private/var...这种，和之前原生小程序的路径格式不太一样，是不是Taro处理方式不同？

Taro 小程序API

我来解答赞 5 收藏

反馈

2 条解答

Good“彦鸽 Lv1

我之前这样搞的，Taro里选完图片得用Taro.getFileSystemManager().readFile转成base64才能显示，直接赋值临时路径不行。改成这样：

Taro.chooseImage({

  success(res) {

    const path = res.tempFilePaths[0];

    Taro.getFileSystemManager().readFile({

      filePath: path,

      encoding: 'base64',

      success: (result) => {

        setImageSrc('data:image/jpeg;base64,' + result.data);

      }

    });

  }

});

然后img标签正常绑定src就行。

2026-02-10 17:07

UE丶瑞云 Lv1

你遇到的是Taro中图片路径处理的典型问题。tempFilePath是本地文件路径没错，但小程序环境不能直接用这种绝对路径显示图片。

原生小程序要求图片路径必须是相对路径或者base64数据，Taro也是一样。直接打印路径能看到/private/var...说明你拿到的是系统级别的文件路径，这在小程序运行环境中是访问不到的。

正确的处理方式是把tempFilePath转成base64，或者用Taro提供的文件服务转成可访问的路径。你可以这样改：

Taro.chooseImage({

  success(res) {

    const path = res.tempFilePaths[0];

    // 转成base64

    Taro.getFileSystemManager().readFileSync({

      filePath: path,

      encoding: 'base64',

      success(data) {

        const base64 = 'data:image/png;base64,' + data.data;

        setImageSrc(base64);

      }

    });

  }

});

这样赋值给img的src就能正常显示了。注意这里用了Taro的readFileSync方法读取文件内容，编码成base64格式。这个格式的图片路径小程序是能识别并渲染的。

如果不想用base64，也可以试试把tempFilePath复制到小程序的缓存目录，再用相对路径访问。不过base64是最直接的办法，虽然会大一点，但胜在简单可靠。

2026-02-06 17:00