uniapp 发布后原生img正常,image无法显示,img与uniapp image使用区别

问题描述:

需要在本地测试和发布后图片都能正常显示,线上是把项目放在了/web目录下,使用html img src="static/images/guideArrow.png"时都能正常显示,但使用uniapp image则不行,由于image兼容性比较好,所以想改成Image格式。

测试效果:

uniapp image src="static/images/guideArrow.png"在本地和服务器都是不能正常显示的,需要改成绝对路径src="/static/images/guideArrow.png"在本地才能正常显示,但是在发布到服务器后会少个/web,导致服务器显示不了图片。

img能正常显示的原因是src解析与uniapp image src不同,src开头带不带/都是代表绝对路径(相对于服务器根目录),但在uniapp image中,不带则代表相对路径(相对于当前路由目录)。img有个特点, 当使用绝对路径,服务器部署到/web时,它会在/web下找图片,但是uniapp image则不会,image使用绝对路径是直接在服务器的"/"找图片。

解决办法:

写一个url转换方法,根据不同环境加不同前缀。

复制代码
getImgUrl(url) {
   if (url) {
        return (process.env.NODE_ENV === 'production' ? '/web' : '') + url
    }
}

调用:

复制代码
<image
     :src="getImgUrl('/static/images/guideArrow.png')"
 ></image>
相关推荐
不午睡的探索者18 分钟前
告别性能瓶颈!Python 量化工程师,进击 C++ 高性能量化交易的“必修课”!
c++·github
光溯星河28 分钟前
【实践手记】Git重写已提交代码历史信息
后端·github
独立开阀者_FwtCoder30 分钟前
URL地址末尾加不加 "/" 有什么区别
前端·javascript·github
独立开阀者_FwtCoder34 分钟前
Vue3 新特性:原来watch 也能“暂停”和“恢复”了!
前端·javascript·github
寻月隐君1 小时前
告别 Vec!掌握 Rust bytes 库,解锁零拷贝的真正威力
后端·rust·github
inhere5 小时前
gookit/goutil v0.7.0 新版本发布:模块调整与功能增强
开源·go·github
Little_Code5 小时前
uniapp 使用ffmpeg播放rtsp
ffmpeg·uni-app·rtsp
用户621024530925 小时前
React:当UI开发从「搬砖」变成「搭乐高」的魔法时刻!
github
用户3918384172115 小时前
Jupyter Notebook:不只是个笔记本,而是你的科学计算驾驶舱!
github
用户255581606905 小时前
Laravel实战指南:从工匠工具到现代PHP开发的艺术
github