Taro 中如何正确处理微信小程序和 H5 端的图片路径差异？

琳贺 Dev 提问于 2026-03-17 13:48:22 阅读 14

框架

我在用 Taro 开发一个多端项目，本地图片在 H5 上能正常显示，但编译到微信小程序就加载失败了。查了文档说要放 src/assets 下，也试过 require 引入，但还是不行。是不是不同端对静态资源的处理方式不一样？

比如这段代码：

const MyImage = () => {
  return (
    <View>
      <Image src={require('@/assets/logo.png')} />
    </View>
  );
};

在 H5 没问题，小程序端控制台报“无效的 image src”。有没有统一的写法能适配两端？

我来解答赞 2 收藏

反馈

1 条解答

欣亿 Lv1

这个问题我踩过，之前被折磨过很久。

核心问题在于：小程序端对图片路径的处理比 H5 严格得多，require 引入的方式在 Taro 里其实没那么靠谱。

最直接的解决办法是改用 import 引入：

import logo from '@/assets/logo.png'



const MyImage = () => {

  return (

    <View>

      <Image src={logo} />

    </View>

  )

}

Taro 会根据当前编译环境自动处理这个路径，H5 端就是正常的 URL，小程序端会转换成 dist 目录下的相对路径。

你之前用 require 不行，主要是因为小程序对资源路径有严格要求，必须是字符串形式的路径，不能是模块对象。

还有个坑要提醒你：图片必须放在 src 目录下，不能放在项目根目录的 assets。我见过有人把 assets 放在外面，结果 H5 能跑小程序就不行。

如果你的图片是动态的，比如从接口获取的 URL，那直接用字符串就行，不需要特殊处理。只有本地静态资源才需要 import 引入这种写法。

2026-03-17 15:12