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>
相关推荐
军军君017 小时前
基于Springboot+UniApp+Ai实现模拟面试小工具四:后端项目基础框架搭建下
spring boot·spring·面试·elementui·typescript·uni-app·mybatis
小徐_233311 小时前
uni-app 弹窗总被父元素“绑架”?3招破局,H5/小程序/APP一招通杀!
前端·微信小程序·uni-app
我是一只代码狗12 小时前
idea中使用git
git·gitee·github
产品经理独孤虾14 小时前
GitHub Copilot:产品经理提升工作效率的AI助手
github·copilot·产品经理·原型设计·ai工具·效率提升·prd
杜莱15 小时前
IDEA 安装AI代码助手GitHub Copilot和简单使用体验
人工智能·github·intellij-idea
LogicFlow16 小时前
对单调的画布说拜拜👋🏻
前端框架·开源·github
Java陈序员17 小时前
又一款基于 SpringBoot + Vue 实现的开源新零售商城系统!
vue.js·spring boot·uni-app
強云18 小时前
使用 SSH 连接 GitHub
ssh·github
这里有鱼汤19 小时前
🚀逆天神器来了!MCP Chrome:超越Playwright,让AI接管你的浏览器,我当场震撼!
github·mcp