Chameleon里怎么处理跨端的图片路径问题?

秀莲🍀 阅读 8

我在用 Chameleon 开发一个跨端项目,H5 和小程序都要用同一套代码。但图片路径在不同平台表现不一致,本地图片放 static 目录下,H5 能正常加载,微信小程序却显示不出来。

我试过用 cml.utils.getStaticUrl() 包裹路径,也试过写成绝对路径,但小程序还是报找不到文件。是不是哪里配置错了?

这是我的引用方式:

<image src="{{cml.utils.getStaticUrl('/static/logo.png')}}"></image>
我来解答 赞 5 收藏
二维码
手机扫码查看
1 条解答
西门凌萓
Chameleon 的静态资源路径处理确实有点坑。

问题在于 cml.utils.getStaticUrl() 这个方法名是错的,Chameleon 根本没这个 API。

直接用相对路径就行,Chameleon 编译时会自动处理各端的路径:

<image src="../../static/logo.png"></image>


注意路径层级——如果你的组件在 components/xxx/index.cml 下,那就要用 ../../static/ 回到根目录。

如果你的图片放在组件同级目录,也可以直接写:

<image src="./images/logo.png"></image>


还有一种方式是用 require(适用于小程序的某些场景):

import logo from '../../static/logo.png'

// 然后在模板里用
<image src="{{logo}}"></image>


最省心的办法就是把图片统一放在项目根目录的 static 文件夹下,然后用相对路径引用,编译到各端基本不会出问题。
点赞
2026-03-11 10:39