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>
相关推荐
极小狐6 小时前
极狐GitLab 合并请求依赖如何解决?
运维·git·ssh·gitlab·github
八股文领域大手子9 小时前
如何给GitHub项目提PR(踩坑记录
大数据·elasticsearch·github
泯泷10 小时前
探索DeepWiki:开发者的代码知识库利器
github·openai·ai编程
福尔摩东10 小时前
从零到精通:2025年最全大模型学习资源
人工智能·github
Gladiator57512 小时前
博客记录-day153-力扣
github
七七小报12 小时前
uniapp-商城-38-shop 购物车 选好了 进行订单确认4 配送方式1
uni-app
大鹏dapeng12 小时前
使用gonectr操作gone项目,包括:创建项目、安装依赖、生成代码、编译和运行
后端·go·github
七七小报14 小时前
uniapp-商城-39-shop 购物车 选好了 进行订单确认4 配送方式2 地址页面
uni-app
G_GreenHand14 小时前
uniapp 仿小红书轮播图效果
uni-app
梓羽玩Python14 小时前
开源AI代理爆火!Suna:3天内新增5.5K+标星,自然对话驱动的自动化神器!
人工智能·python·github